//
// Alerts
// --------------------------------------------------


.misago-alert-close(@text, @bg) {
  background-color: @bg;
  box-shadow: 0px 0px 0px 2px fadeOut(@text, 25%);
  .opacity(1);

  color: fadeOut(@text, 10%);

  &:hover {
    background-color: @text;
    box-shadow: 0px 0px 0px 2px @text;

    color: darken(@bg, 35%);
  }

  &:active, &:focus {
    background-color: darken(@bg, 15%);
    box-shadow: 0px 0px 0px 2px darken(@bg, 15%);
    outline: none;

    color: @text;
  }
}


.misago-alerts {
  margin-bottom: @line-height-computed;

  .alerts-list {
    width: 100%;

    text-align: center;

    &.affix {
      top: 0;
      z-index: @zindex-navbar-fixed;
    }

    .alert {
      border: none;
      border-bottom: 6px solid fadeOut(#000, 85%);
      border-radius: 0;
      margin-bottom: 0px;
      padding: (@line-height-computed * 0.8) 0px;
      padding-bottom: (@line-height-computed * 0.8) - 4px;

      .alert-icon {
        margin: -@alert-padding 0px;
        margin-right: @alert-padding * .7;
        position: relative;
        top: ((@font-size-base * 1.8) - @line-height-computed) / 2;

        font-size: @font-size-base * 1.8;
      }

      .close {
        border-radius: @border-radius-small;
        float: none;
        margin-left: @alert-padding;
        padding: 6px 8px;

        font-size: @font-size-small;
        text-shadow: none;
      }

      &.alert-success {
        .close {
          .misago-alert-close(@alert-success-text, @alert-success-bg);
        }
      }

      &.alert-info {
        .close {
          .misago-alert-close(@alert-info-text, @alert-info-bg);
        }
      }

      &.alert-warning {
        .close {
          .misago-alert-close(@alert-warning-text, @alert-warning-bg);
        }
      }

      &.alert-danger {
        .close {
          .misago-alert-close(@alert-danger-text, @alert-danger-bg);
        }
      }
    }
  }
}
