@use "sass:math";

.sui-o-notification {
  position: fixed;
  bottom: $sui-space-lg;
  right: $sui-space-lg + $sui-intercom-offset;
  width: $sui-o-notification-size;
  max-width: calc(100% - #{$sui-space-lg*2});
  z-index: $sui-z-index-o-notification;

  &__item {
    position: relative;
    border: $sui-size-border solid rgba(0, 0, 0, .1);
    border-right-width: $sui-size-border*4;
    background: $sui-color-brand-denim-300;
    padding: $sui-space-sm $sui-space-xl $sui-space-sm $sui-space-md;
    border-radius: $sui-border-radius-sm;
    margin-bottom: $sui-space-md;
    opacity: 0;
    animation: sui-o-notification--show $sui-o-notification--show-duration normal forwards $sui-curve-easeOutBack;

    // -------------------------
    //    Toggle state
    // -------------------------
    &.as--toggle {
      @for $i from 1 through $sui-o-notification--toggle-duration-max {
        &[data-delay='#{$i}'] {
          animation: sui-o-notification--toggle #{$i}s normal forwards $sui-curve-easeOutBack;

          &::after {
            animation: sui-o-notification--loader #{$i}s normal forwards linear;
          }
        }
      }

      &::after {
        content: '';
        display: block;
        position: absolute;
        right: -$sui-size-border*4;
        bottom: 0;
        height: rem(2);
        background: rgba(0, 0, 0, .4);
      }
    }

    // -------------------------
    //    Hidden state
    // -------------------------
    &.as--hidden {
      animation: sui-o-notification--hide $sui-o-notification--hide-duration normal forwards $sui-curve-easeOutBack;
    }

    &:last-child {
      margin-bottom: 0;
    }

    a:not(.sui-a-button) {
      color: inherit !important;
    }

    &.as--primary {
      color: contrast($sui-color-primary);
      background: $sui-color-primary;
    }

    &.as--success {
      color: contrast($sui-color-success);
      background: $sui-color-success;
    }

    &.as--warning {
      color: contrast($sui-color-warning);
      background: $sui-color-warning;
    }

    &.as--danger {
      color: contrast($sui-color-danger);
      background: $sui-color-danger;
    }
  }

  &__actions {
    display: flex;
    flex-direction: row;
    border-top: $sui-size-border solid rgba(0, 0, 0, .1);
    margin-top: $sui-space-md;
    margin-left: -$sui-space-md;
    margin-bottom: -$sui-space-sm;
    margin-right: -$sui-space-xl;

    > * {
      flex: 1;
      padding: $sui-space-sm;
      color: inherit;
      font-weight: bold;
      transition: .2s;

      & + * {
        border-left: $sui-size-border solid rgba(0, 0, 0, .1);
      }

      &:hover {
        background: rgba(0, 0, 0, .05);
      }

      &:focus,
      &:active {
        background: rgba(0, 0, 0, .1);
      }
    }
  }

  &__button {
    flex: 1;
    padding: $sui-space-sm;
    color: inherit;
    font-weight: bold;
    transition: .2s;

    & + & {
      border-left: $sui-size-border solid rgba(0, 0, 0, .1);
    }

    &:hover {
      background: rgba(0, 0, 0, .05);
    }

    &:focus,
    &:active {
      background: rgba(0, 0, 0, .1);
    }
  }

  &__clear {
    position: absolute;
    right: math.div($sui-size-xxs, 3);
    top: math.div($sui-size-xxs, 3);
    width: rem(30);
    height: rem(30);
    line-height: rem(30);
    text-align: center;
    text-transform: uppercase;
    font-weight: 300;
    color: inherit;
    border-radius: $sui-border-radius-rounded;
    padding: 0;
    transition: .2s;

    &::before {
      content: "\00d7";
    }

    &:hover,
    &:focus {
      font-weight: 400;
      background: rgba(0, 0, 0, .05);
    }

    &:active:focus {
      outline: none;
      box-shadow: 0 0 0 rem(1) currentColor;
    }
  }
}
