// Imports
@import './_variables.scss';

.nv-tag {
  @apply leading-normal inline-flex items-center align-middle border box-border transition whitespace-nowrap max-w-full;

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

  // Colors

  &--default {
    @apply bg-gray-300 border-gray-300 text-black
    hover:bg-gray-400/70 hover:border-transparent;

    .nv-avatar {
      @apply text-current;
    }

    &.nv-tag--outlined {
      @apply bg-transparent border-gray-300
      hover:bg-gray-400/10;

      .nv-tag__close {
        @apply hover:bg-gray-400/20
        focus:bg-gray-400/20;
      }

      .nv-avatar {
        @apply bg-gray-400/20 text-current;
      }
    }
  }

  &--primary {
    @apply bg-primary-lighten border-primary-lighten text-white
    hover:bg-primary hover:border-primary;

    .nv-tag__close {
      @apply hover:bg-primary-darken
      focus:bg-primary-darken;
    }

    .nv-avatar {
      @apply bg-white text-primary-lighten;
    }

    &.nv-tag--outlined {
      @apply bg-transparent border-primary-lighten text-primary-lighten
      hover:bg-primary/10;

      .nv-tag__close {
        @apply hover:bg-primary/20
        focus:bg-primary/20;
      }

      .nv-avatar {
        @apply bg-primary/10 text-current;
      }
    }
  }

  &--success {
    @apply bg-success-lighten border-success-lighten text-white
    hover:bg-success hover:border-success;

    .nv-tag__close {
      @apply hover:bg-success-darken
      focus:bg-success-darken;
    }

    .nv-avatar {
      @apply bg-white text-success-lighten;
    }

    &.nv-tag--outlined {
      @apply bg-transparent border-success-lighten text-success-lighten
      hover:bg-success/10;

      .nv-tag__close {
        @apply hover:bg-success/20
        focus:bg-success/20;
      }

      .nv-avatar {
        @apply bg-success/10 text-current;
      }
    }
  }

  &--alert {
    @apply bg-alert-lighten border-alert-lighten text-white
    hover:bg-alert hover:border-alert;

    .nv-tag__close {
      @apply hover:bg-alert-darken
      focus:bg-alert-darken;
    }

    .nv-avatar {
      @apply bg-white text-alert-lighten;
    }

    &.nv-tag--outlined {
      @apply bg-transparent border-alert-lighten text-alert-lighten
      hover:bg-alert/10;

      .nv-tag__close {
        @apply hover:bg-alert/20
        focus:bg-alert/20;
      }

      .nv-avatar {
        @apply bg-alert/10 text-current;
      }
    }
  }

  &--warning {
    @apply bg-warning-lighten border-warning-lighten text-white
    hover:bg-warning hover:border-warning
    focus:bg-warning focus:border-warning focus:outline focus:outline-4 focus:outline-gray-300;

    .nv-tag__close {
      @apply hover:bg-warning-darken
      focus:bg-warning-darken;
    }

    .nv-avatar {
      @apply bg-white text-warning-lighten;
    }

    &.nv-tag--outlined {
      @apply bg-transparent border-warning-lighten text-warning-lighten
      hover:bg-warning/10
      focus:bg-transparent focus:text-warning-darken focus:border-warning-lighten focus:outline-blue-50;

      .nv-tag__close {
        @apply hover:bg-warning/20
        focus:bg-warning/20;
      }

      .nv-avatar {
        @apply bg-warning/10 text-current;
      }
    }
  }

  // ---

  &--outlined {
    @apply bg-transparent;
  }

  &--closable {
    @apply pr-px;
  }

  &--icon {
    &-left {
      @apply pl-1 #{!important};
      .nv-tag__icon-left {
        @apply mr-1;
      }
    }

    &-right {
      &:not(.nv-tag--closable) {
        @apply pr-1 #{!important};
      }

      .nv-tag__icon-right {
        @apply ml-1;
      }

      .nv-tag__close {
        @apply ml-0.5 #{!important};
      }
    }
  }

  &__close {
    @apply rounded-full cursor-pointer transition hover:bg-gray-700/20 focus:bg-gray-700/20 focus-visible:outline-0 ml-1;
  }

  &__content {
    @apply flex items-center font-medium;
    //@apply truncate;
  }

  .nv-avatar {
    @apply border-none;
    &:first-child {
      @apply mr-1;
    }
    &:not(:first-child) {
      @apply ml-1;
    }
  }

  @each $name, $size in $tag-sizes {
    &.nv-size--#{$name} {
      height: #{$size};
      font-size: map-deep-get($tag-font-sizes, $name);
      padding-left: map-deep-get($tag-paddings-x, $name);

      &:not(.nv-tag--closable) {
        padding-right: map-deep-get($tag-paddings-x, $name);
      }

      .nv-avatar {
        font-size: map-deep-get($tag-font-sizes, $name);
        width: #{$size - 2px};
        height: #{$size - 2px};

        &:first-child {
          margin-left: calc(0px - map-deep-get($tag-paddings-x, $name));
        }
        &:not(:first-child) {
          margin-right: calc(0px - map-deep-get($tag-paddings-x, $name));
        }
      }

      &.nv-tag--closable {
        .nv-avatar {
          &:not(:first-child) {
            margin-right: calc(0px - map-deep-get($tag-paddings-x, $name) / 4);
          }
        }
      }

      .nv-tag__close {
        width: map-deep-get($tag-icon-sizes, $name);
        height: map-deep-get($tag-icon-sizes, $name);
        margin-left: calc(map-deep-get($tag-icon-sizes, $name) / 4);
      }

      .nv-icon {
        font-size: map-deep-get($tag-icon-sizes, $name);
        width: map-deep-get($tag-icon-sizes, $name);
        height: map-deep-get($tag-icon-sizes, $name);

        svg {
          width: map-deep-get($tag-icon-sizes, $name);
          height: map-deep-get($tag-icon-sizes, $name);
        }
      }
    }
  }
}