// Imports
@use '../../styles/tools';
@import './_variables.scss';

.nv-alert {
  @apply grid text-white;
  flex: 1 1;
  grid-template-areas: "prepend content append close btns";
  grid-template-columns: max-content auto max-content min-content max-content;
  position: relative;
  padding: $alert-padding;
  overflow: hidden;
  transition: all 0.4s;

  &:not([class*=" rounded-"]):not([class^="rounded-"]) {
    @apply rounded;
  }

@include tools.position($alert-positions);
@include tools.variant($alert-variants...);


  &--info {
    @apply bg-primary text-white;
    &.nv-alert--variant-outlined,
    &.nv-alert--variant-text,
    &.nv-alert--variant-contained-text,
    &.nv-alert--variant-plain {
      @apply text-primary;
    }
  }

  &--dark {
    @apply bg-black/80 text-white;
    &.nv-alert--variant-outlined,
    &.nv-alert--variant-text,
    &.nv-alert--variant-contained-text,
    &.nv-alert--variant-plain {
      @apply text-black/80;
    }
  }

  &--success {
    @apply bg-success text-white;
    &.nv-alert--variant-outlined,
    &.nv-alert--variant-text,
    &.nv-alert--variant-contained-text,
    &.nv-alert--variant-plain {
      @apply text-success;
    }
  }

  &--warning {
    @apply bg-warning text-white;
    &.nv-alert--variant-outlined,
    &.nv-alert--variant-text,
    &.nv-alert--variant-contained-text,
    &.nv-alert--variant-plain {
      @apply text-warning;
    }
  }

  &--alert {
    @apply bg-alert text-white;
    &.nv-alert--variant-outlined,
    &.nv-alert--variant-text,
    &.nv-alert--variant-contained-text,
    &.nv-alert--variant-plain {
      @apply text-alert;
    }
  }

  &__border {
    border-radius: inherit;
    bottom: 0;
    left: 0;
    opacity: .38;
    position: absolute;
    pointer-events: none;
    right: 0;
    top: 0;
    width: 100%;
    border-color: currentColor;
    border-style: solid;
    border-width: 0;
  }
  &--border {
    &.nv-alert--border-top {
      padding-top: $alert-padding + $alert-border-width;
      .nv-alert__border {
        border-top-width: $alert-border-width;
      }
    }
    &.nv-alert--border-end {
      padding-right: $alert-padding + $alert-border-width;
      .nv-alert__border {
        border-inline-end-width: $alert-border-width;
      }
    }
    &.nv-alert--border-bottom {
      padding-bottom: $alert-padding + $alert-border-width;
      .nv-alert__border {
        border-bottom-width: $alert-border-width;
      }
    }
    &.nv-alert--border-start {
      padding-left: $alert-padding + $alert-border-width;
      .nv-alert__border {
        border-inline-start-width: $alert-border-width;
      }
    }
  }

  &--prominent .nv-alert__prepend {
    align-self: center;
  }

  &__prepend {
    grid-area: prepend;
    margin-inline-end: $alert-prepend-margin-inline-end;
  }

  &__content {
    @apply flex flex-col justify-center;
    grid-area: content;
    font-size: $alert-content-font-size;
    line-height: $alert-content-line-height;
  }

  &__append {
    grid-area: append;
  }

  &__close {
    grid-area: close;
    align-self: flex-start;
    cursor: pointer;
    display: flex;
    flex: 0 1 auto;
    user-select: none;
    @apply opacity-50 transition
    hover:opacity-100;
  }

  &__btns {
    @apply flex flex-col border-l border-white/10;
    grid-area: btns;
    margin-top: -$alert-padding;
    margin-bottom: -$alert-padding;
    margin-right: -$alert-padding;
    margin-left: $alert-padding;
  }

  .nv-alert__btn {
    @apply flex flex-1 px-4 py-2 cursor-pointer items-center
    hover:bg-white/10;
    font-size: $alert-content-font-size;
    &:not(:last-child) {
      @apply border-b border-white/10;
    }
  }

  &-title {
    @apply flex items-center;
    font-size: $alert-title-font-size;
    font-weight: $alert-title-font-weight;
    hyphens: $alert-title-hyphens;
    letter-spacing: $alert-title-letter-spacing;
    line-height: $alert-title-line-height;
    overflow-wrap: $alert-title-overflow-wrap;
    text-transform: $alert-title-text-transform;
    word-break: $alert-title-word-break;
    word-wrap: $alert-title-word-wrap;
  }

  &__progress {
    @apply absolute left-0 bottom-0 w-full h-1 bg-current opacity-25 transition-all;
    transform-origin: 0 50%;
    transform: scaleX(1);

    &_scale {
      transform: scaleX(0);
    }
  }

  &.nv-alert--top-right,
  &.nv-alert--bottom-right {
    right: 16px;
  }

  &.nv-alert--top-left,
  &.nv-alert--bottom-left {
    left: 16px;
  }

  &.nv-alert--bottom,
  &.nv-alert--top {
    left: 50%;
    transform: translateX(-50%);
  }

  &--fixed {
    z-index: $notify-z-index;
  }
}

.nvt-alert-fade-enter-active {
  transition: all 0.3s ease-out;
}

.nvt-alert-fade-leave-active {
  //transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  transition: all 0.3s ease-in-out;
}

.nvt-alert-fade-enter-from,
.nvt-alert-fade-leave-to {
  //transform: translateX(20px);
  &.nv-alert--top-right,
  &.nv-alert--bottom-right {
    right: 0;
    transform: translateX(100%);
  }

  &.nv-alert--top-left,
  &.nv-alert--bottom-left {
    left: 0;
    transform: translateX(-100%);
  }

  &.nv-alert--bottom {
    transform: translate(-50%, 100%);
  }

  &.nv-alert--top {
    transform: translate(-50%, -100%);
  }

  opacity: 0;
}