@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$tags-corner-radius: $border-radius-pill !default;
$tags-padding: 0px 10px !default;
$tags-margin: 3px !default;
$tags-height: 28px !default;
$tags-icon-size: 2rem !default;
$tags-icon-color: map-get($denali-grey-colors,"800") !default;
$tags-bg-color: map-get($denali-brand-colors,"100") !default;
$tags-text-color: map-get($denali-grey-colors,"800") !default;
$tags-active-bg-color: map-get($denali-brand-colors,"200") !default;
$tags-disabled-bg-color: rgba(map-get($denali-grey-colors,"800"), .1) !default;
$tags-disabled-text-color: rgba(map-get($denali-grey-colors,"800"), .4) !default;
$tags-small-text-size: 1.2rem !default;
$tags-small-padding: 0px 8px !default;
$tags-small-height: 22px !default;
$tags-small-icon-size: 1.6rem !default;
$tags-outlined-text-color: map-get($denali-grey-colors,"800") !default;
$tags-outlined-border: 1px solid map-get($denali-brand-colors,"300") !default;
$tags-outlined-bg-color: transparent !default;
$tags-outlined-hover-bg-color: rgba(map-get($denali-brand-colors,"300"), 0.20) !default;
$tags-outlined-active-text-color: map-get($denali-grey-colors,"100") !default;
$tags-outlined-active-bg-color: rgba(map-get($denali-brand-colors,"300"), 1) !default;
$tags-outlined-disabled-text-color: rgba(map-get($denali-grey-colors,"800"), .4) !default;
$tags-outlined-disabled-bg-color: rgba(map-get($denali-grey-colors,"800"), .1) !default;
$tags-outlined-disabled-border-color: rgba(map-get($denali-grey-colors,"800"), .4) !default;

@mixin tags-default {
  // Tag List
  div.tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    &.nowrap {
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-x: -moz-scrollbars-none;
      &::-webkit-scrollbar {
        width: 0 !important
      }
    }
  }

  .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: $tags-padding;
    height: $tags-height;
    margin: $tags-margin;
    background: $tags-bg-color;
    color: $tags-text-color;
    border-radius: $tags-corner-radius;
    white-space: nowrap;
    transition: 300ms;

    &.is-active {
      background: $tags-active-bg-color;
    }

    &[disabled],
    &.is-disabled {
      background: $tags-disabled-bg-color;
      color: $tags-disabled-text-color;
    }

    .d-icon {
      font-size: $tags-icon-size !important;
    }

    &.is-small {
      font-size: $tags-small-text-size;
      height: $tags-small-height;
      padding: $tags-small-padding;
      .d-icon {
        font-size: $tags-small-icon-size !important;
      }
    }

    a.d-icon {
      opacity: .5;
      color: $tags-icon-color;
      &:hover {
        opacity: 1;
      }
    }

    &.has-icon-back {
      padding-right: 6px;
      .d-icon {
        margin-left: 6px;
      }
      &.is-small {
        padding-right: 4px;
        .d-icon {
          margin-left: 4px;
        }
      }
    }

    &.has-icon-front {
      .d-icon {
        margin-right: 4px;
      }
    }

    &.outlined {
      background: $tags-outlined-bg-color;
      color: $tags-outlined-text-color !important;
      border: $tags-outlined-border;

      &:hover {
        background: $tags-outlined-hover-bg-color;
        color: $tags-outlined-text-color !important;
        transition: 300ms;
      }
      &.is-active {
        background: $tags-outlined-active-bg-color;
        color: $tags-outlined-active-text-color !important;
      }
      &[disabled],
      &.is-disabled {
        background: $tags-outlined-disabled-bg-color;
        color: $tags-outlined-disabled-text-color;
        border-color: $tags-outlined-disabled-border-color;
      }
    }
  }
}

@mixin tags-theme {
  .tag {
    padding: $tags-padding;
    height: $tags-height;
    margin: $tags-margin;
    background: $tags-bg-color;
    color: $tags-text-color;
    border-radius: $tags-corner-radius;

    &.is-active {
      background: $tags-active-bg-color;
    }

    &[disabled],
    &.is-disabled {
      background: $tags-disabled-bg-color;
      color: $tags-disabled-text-color;
    }

    .d-icon {
      font-size: $tags-icon-size !important;
    }

    &.is-small {
      font-size: $tags-small-text-size;
      height: $tags-small-height;
      padding: $tags-small-padding;

      .d-icon {
        font-size: $tags-small-icon-size !important;
      }
    }

    a.d-icon {
      color: $tags-icon-color;
    }

    &.outlined {
      background: $tags-outlined-bg-color;
      color: $tags-outlined-text-color !important;
      border: $tags-outlined-border;

      &:hover {
        background: $tags-outlined-hover-bg-color;
        color: $tags-outlined-text-color !important;
      }

      &.is-active {
        background: $tags-outlined-active-bg-color;
        color: $tags-outlined-active-text-color !important;
      }

      &[disabled],
      &.is-disabled {
        background: $tags-outlined-disabled-bg-color;
        color: $tags-outlined-disabled-text-color !important;
        border-color: $tags-outlined-disabled-border-color;
      }
    }
  }
}