@import '../../scss/variables/colors';

$toast-appear-animation-timeout: 200ms;
$toast-exit-animation-timeout: 200ms;

$base-class: 'toast';

.#{$base-class} {
  display: inline-flex;
  flex: 0 1 auto;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  min-width: 300px;
  max-width: 500px;
  padding: 10px 12px 10px 12px;
  font-size: 15px;
  background: #fff;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 20px;
  letter-spacing: normal;
  box-shadow: 0 6px 30px -10px rgba(0, 0, 0, 0.3);
  border-radius: 4px;

  &__content {
    color: $font-primary-color;
    width: 100%;
  }

  &__icon,
  &__close {
    height: 20px;
    padding-right: 12px;
    align-self: baseline;
  }

  &__icon svg {
    display: flex;
    fill: $primary-color;
    height: 20px;
    width: 20px;
  }

  &__actions {
    margin-left: auto;
    height: 20px;
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    flex: 1 0 auto;
    flex-wrap: nowrap;
    margin-bottom: auto;

    &-close {
      margin-left: 16px;
      display: flex;
      align-items: center;
      flex: 0 1 auto;
      height: 100%;
      width: 100%;    

      svg {
        display: flex;
        fill: $font-tertiary-color;
        height: 16px;
        width: 16px;
        cursor: pointer;
      }
    }

    &-custom {
      white-space: nowrap;
      background-color: transparent;
      outline: 0;
      border: 0;
      margin-left: 16px;
      color: $font-primary-color;
      cursor: pointer;
      font-weight: 600;
      padding: 0;
      line-height: 20px;
      text-decoration: underline;
    }
  }

  &--success {
    background: $success-color;
  }

  &--warning {
    background: $warning-color;
  }

  &--error {
    background: $error-color;
  }

  &--info {
    background: $info-color;
  }

  &--success,
  &--warning,
  &--error,
  &--info {
    .#{$base-class}__content,
    .#{$base-class}__actions-custom {
      color: #fff;
    }

    svg {
      fill: #fff;
    }
  }

  &-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 120;
    position: absolute;

    &--fixed {
      position: fixed;
    }

    &--block {
      position: static;
    }

    &--horizontal-center {
      left: calc(50%);
      transform: translateX(-50%);
    }

    &--horizontal-left {
      left: 5px;
    }

    &--horizontal-right {
      right: 5px;
    }

    &--vertical-top {
      top: 5px;

      .#{$base-class} {
        margin-bottom: 10px;
      }

      .#{$base-class}-appear--slide {
        transform: translateY(-100%) !important;

        &.#{$base-class}-appear-active--slide {
          transform: translateY(0) !important;
          transition: transform $toast-appear-animation-timeout ease-in;
        }
      }

      .#{$base-class}-exit--slide {
        transform: translateY(0) !important;

        &.#{$base-class}-exit-active--slide {
          transform: translateY(-100%) !important;
          transition: transform $toast-exit-animation-timeout ease-in;
        }
      }
    }

    &--vertical-bottom {
      bottom: 5px;

      .#{$base-class} {
        margin-top: 10px;
      }

      .#{$base-class}-appear--slide {
        transform: translateY(100%) !important;

        &.#{$base-class}-appear-active--slide {
          transform: translateY(0) !important;
          transition: transform $toast-appear-animation-timeout ease-in;
        }
      }

      .#{$base-class}-exit--slide {
        transform: translateY(0) !important;

        &.#{$base-class}-exit-active--slide {
          transform: translateY(100%) !important;
          transition: transform $toast-exit-animation-timeout ease-in;
        }
      }
    }

    &--vertical-top,
    &--vertical-bottom {
      .#{$base-class}-appear--fade {
        opacity: 0;

        &.#{$base-class}-appear-active--fade {
          opacity: 1;
          transition: opacity $toast-appear-animation-timeout ease-in;
        }
      }

      .#{$base-class}-exit--fade {
        opacity: 1;
        transition: opacity $toast-appear-animation-timeout ease-in;

        &.#{$base-class}-exit-active--fade {
          opacity: 0;
        }
      }
    }
  }
}