@import "../settings/variables";
@import "../tools/buttons";
@import "../tools/forms";

@keyframes banner-expand {
  from {
    padding-top: 0;
    padding-bottom: 0;
    max-height: 0;
    min-height: 0;
    overflow-y: hidden;
  }
  to {
    padding-top: spacing(sm);
    padding-bottom: spacing(sm);
    min-height: 32px;
    max-height: 120px;
    overflow-y: auto;
  }
}

.banner {
  $root: &;

  align-items: center;
  border-left: spacing(sm) solid;
  border-radius: 4px;
  box-shadow: $banner-box-shadow;
  color: $banner-text-color;
  display: flex;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 spacing(lg);

  &.banner--error {
    background-color: $banner-background-color-error;
    border-left-color: $banner-accent-color-error;

    #{$root}__dismiss:hover {
      color: $banner-background-color-error;
    }

    #{$root}__icon {
      color: $banner-accent-color-error;
    }
  }

  &.banner--success {
    background-color: $banner-background-color-success;
    border-left-color: $banner-accent-color-success;

    #{$root}__dismiss:hover {
      color: $banner-background-color-success;
    }

    #{$root}__icon {
      color: $banner-accent-color-success;
    }
  }

  &.banner--action {
    background-color: $banner-background-color-action;
    border-left-color: $banner-accent-color-action;

    #{$root}__dismiss:hover {
      color: $banner-background-color-action;
    }

    #{$root}__icon {
      color: $banner-accent-color-action;
    }
  }

  &.banner--info {
    background-color: $banner-background-color-info;
    border-left-color: $banner-accent-color-info;

    #{$root}__dismiss:hover {
      color: $banner-background-color-info;
    }

    #{$root}__icon {
      color: $banner-accent-color-info;
    }
  }

  &.banner--expandable {
    flex-direction: column;
    align-items: stretch;
    padding: 0;

    #{$root}__static-content {
      position: relative;
      padding: 0 spacing(lg);
      min-height: 52px;

      color: $banner-text-color;
      box-shadow: $banner-box-shadow;

      z-index: 1;
    }
  }

  #{$root}__actions-dropdown {
    // Increase specificity
    &#{$root}__actions-dropdown {
      background-color: transparent;
      border: 1px solid $banner-multiple-action-color;
      color: $banner-text-color;
      flex-shrink: 0; // Fix for IE 11

      &:hover,
      &.button--open {
        background-color: $banner-multiple-action-color;
        color: $banner-multiple-action-hover-color;
      }

      svg {
        height: 24px;
        width: 24px;
      }
    }
  }

  &__expandable-content {
    @include typography-sm($banner-text-color);

    position: relative;
    box-sizing: border-box;

    padding: 0 (spacing(xl) * 2 + spacing(sm));
    background-color: $banner-expand-panel-background-color;

    animation-name: banner-expand;
    animation-duration: $banner-expand-animation-duration;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;

    overflow-y: auto;

    z-index: 0;

    // ------ IE11 ------
    // Can't use :focus styling directly on element in IE, because browser allow focusing on a element (via click) event without tabindex.
    // We conditionally add focus styling to avoid unwanted behavior
    &--focus:focus {
      @include focus();
    }
  }

  &__icon,
  &__dismiss {
    margin: spacing(lg) 0;
  }

  // TODO: remove. used for regression testing on Icon SVG implementation
  &__icon {
    height: $banner-icon-font-size;
    width: $banner-icon-font-size;
  }

  &__dismiss {
    svg {
      height: $banner-icon-font-size;
      width: $banner-icon-font-size;
    }
  }

  &__content {
    align-self: center;
    margin: spacing(sm) spacing(lg);
    width: 100%;
  }

  &__title {
    font-size: $banner-title-font-size;
    font-weight: bold;
  }

  &__body {
    font-size: $banner-body-font-size;
    line-height: $banner-body-line-height;
    margin-top: 6px;

    &:first-child {
      margin-top: 0;
    }
  }

  &__action {
    margin: spacing(sm) 0;
  }

  &__actions-dropdown-overlay {
    #{$root}__dropdown-action {
      width: auto;
    }
  }

  &__dismiss {
    @include button(
      transparent,
      transparent,
      $banner-dismiss-color,
      $banner-dismiss-color,
      $banner-dismiss-color,
      transparent,
      $banner-dismiss-disabled-color,
      $banner-dismiss-disabled-color,
      $banner-dismiss-disabled-color
    ) {
      align-items: center;
      border-radius: 100%;
      cursor: pointer;
      display: flex;
      flex-shrink: 0;
      font-size: $banner-icon-font-size;
      height: $banner-icon-font-size;
      justify-content: center;
      min-width: $banner-icon-font-size;
      padding: 0;
      width: $banner-icon-font-size;
    }

    &:focus {
      @include focus();
    }
  }

  &__action + &__dismiss,
  &__action + &__actions-dropdown,
  &__actions-dropdown + &__dismiss {
    margin-left: spacing(lg);
  }
}