/*
 * Tag element
 */

@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/mixins/typography';

.pkt-tag {
  --pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
}

[data-mode='dark'] .pkt-tag {
  --pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
}

pkt-tag {
  display: inline-block;
  vertical-align: middle;
}

pkt-tag > .pkt-tag {
  display: flex;
}

.pkt-tag {
  width: fit-content;
  background: var(--pkt-color-surface-default-light-blue);
  padding: 0 map.get(variables.$spacing, 'size-8');
  display: inline-flex;
  align-items: center;
  height: auto;
  column-gap: 0;
  color: var(--pkt-color-tag-text-normal);
  border: 0;
  margin: 0;

  @include typography.get-text-style('pkt-txt-14-medium');
  line-height: 1.875rem;

  p {
    margin: 0;
    padding: 0;
    line-height: inherit;
  }

  &.pkt-btn:hover,
  &.pkt-tag--hover {
    background-color: var(--pkt-color-surface-strong-blue);
    color: var(--pkt-color-tag-text-hover);
    text-decoration: underline;
    border-color: transparent;

    svg {
      --fg-color: var(--pkt-color-tag-text-hover);
    }
  }

  &.pkt-btn:focus,
  &.pkt-tag--focus {
    background-color: var(--pkt-color-surface-strong-blue);
    border-color: var(--pkt-color-text-action-active);
    outline: 4px solid var(--pkt-color-border-states-focus);
    color: var(--pkt-color-tag-text-focus);

    svg {
      --fg-color: var(--pkt-color-tag-text-focus);
    }
  }

  &.pkt-btn:active,
  &.pkt-tag--active,
  &.pkt-tag--active:hover {
    background-color: var(--pkt-color-surface-strong-blue);
    color: var(--pkt-color-tag-text-active);

    svg {
      --fg-color: var(--pkt-color-tag-text-active);
    }
  }

  &__icon {
    width: 16px;
    height: 16px;
    margin-right: map.get(variables.$spacing, 'size-8');
  }

  &__close-btn {
    width: 16px;
    height: 16px;
    margin-left: map.get(variables.$spacing, 'size-8');
  }

  // Modifiers
  // Skins
  &.pkt-tag--green {
    background: var(--pkt-color-surface-strong-light-green);

    &.pkt-btn:hover,
    &.pkt-tag--hover {
      background-color: var(--pkt-color-surface-strong-green);
      color: var(--pkt-color-tag-text-hover);

      svg {
        --fg-color: var(--pkt-color-tag-text-hover);
      }
    }

    &.pkt-btn:focus,
    &.pkt-tag--focus {
      background-color: var(--pkt-color-surface-strong-green);
      color: var(--pkt-color-tag-text-focus);

      svg {
        --fg-color: var(--pkt-color-tag-text-focus);
      }
    }

    &.pkt-btn:active,
    &.pkt-tag--active {
      background-color: var(--pkt-color-surface-strong-green);
      color: var(--pkt-color-tag-text-active);

      svg {
        --fg-color: var(--pkt-color-tag-text-active);
      }
    }
  }

  &.pkt-tag--yellow {
    background: var(--pkt-color-surface-default-yellow);

    &.pkt-btn:hover,
    &.pkt-tag--hover {
      background-color: var(--pkt-color-surface-strong-yellow);
      color: var(--pkt-color-tag-text-hover);

      svg {
        --fg-color: var(--pkt-color-tag-text-hover);
      }
    }

    &.pkt-btn:focus,
    &.pkt-tag--focus {
      background-color: var(--pkt-color-surface-strong-yellow);
      color: var(--pkt-color-tag-text-focus);

      svg {
        --fg-color: var(--pkt-color-tag-text-focus);
      }
    }

    &.pkt-btn:active,
    &.pkt-tag--active {
      background-color: var(--pkt-color-surface-strong-yellow);
      color: var(--pkt-color-tag-text-active);

      svg {
        --fg-color: var(--pkt-color-tag-text-active);
      }
    }
  }

  &.pkt-tag--red {
    background: var(--pkt-color-surface-default-red);

    &.pkt-btn:hover,
    &.pkt-tag--hover {
      background-color: var(--pkt-color-surface-strong-red);
      color: var(--pkt-color-tag-text-hover);

      svg {
        --fg-color: var(--pkt-color-tag-text-hover);
      }
    }

    &.pkt-btn:focus,
    &.pkt-tag--focus {
      background-color: var(--pkt-color-surface-strong-red);
      color: var(--pkt-color-tag-text-focus);

      svg {
        --fg-color: var(--pkt-color-tag-text-focus);
      }
    }

    &.pkt-btn:active,
    &.pkt-tag--active {
      background-color: var(--pkt-color-surface-strong-red);
      color: var(--pkt-color-tag-text-active);

      svg {
        --fg-color: var(--pkt-color-tag-text-active);
      }
    }
  }

  &.pkt-tag--beige {
    background: var(--pkt-color-surface-default-light-beige);

    &.pkt-btn:hover,
    &.pkt-tag--hover {
      background-color: var(--pkt-color-surface-strong-beige);
      color: var(--pkt-color-tag-text-hover);

      svg {
        --fg-color: var(--pkt-color-tag-text-hover);
      }
    }

    &.pkt-btn:focus,
    &.pkt-tag--focus {
      background-color: var(--pkt-color-surface-strong-beige);
      color: var(--pkt-color-tag-text-focus);

      svg {
        --fg-color: var(--pkt-color-tag-text-focus);
      }
    }

    &.pkt-btn:active,
    &.pkt-tag--active {
      background-color: var(--pkt-color-surface-strong-beige);
      color: var(--pkt-color-tag-text-active);

      svg {
        --fg-color: var(--pkt-color-tag-text-active);
      }
    }
  }

  &.pkt-tag--gray,
  &.pkt-tag--grey {
    background: var(--pkt-color-surface-default-gray);

    &.pkt-btn:hover,
    &.pkt-tag--hover {
      background-color: var(--pkt-color-surface-strong-gray);
      color: var(--pkt-color-tag-text-hover);

      svg {
        --fg-color: var(--pkt-color-tag-text-hover);
      }
    }

    &.pkt-btn:focus,
    &.pkt-tag--focus {
      background-color: var(--pkt-color-surface-strong-gray);
      color: var(--pkt-color-tag-text-active);

      svg {
        --fg-color: var(--pkt-color-tag-text-active);
      }
    }

    &.pkt-btn:active,
    &.pkt-tag--active {
      background-color: var(--pkt-color-surface-strong-gray);
      color: var(--pkt-color-tag-text-active);

      svg {
        --fg-color: var(--pkt-color-tag-text-active);
      }
    }
  }

  &.pkt-tag--blue-light {
    background: var(--pkt-color-surface-subtle-light-blue);

    &.pkt-btn:hover,
    &.pkt-tag--hover {
      background-color: var(--pkt-color-surface-strong-blue);
      color: var(--pkt-color-tag-text-hover);

      svg {
        --fg-color: var(--pkt-color-tag-text-hover);
      }
    }

    &.pkt-btn:focus,
    &.pkt-tag--focus {
      background-color: var(--pkt-color-surface-strong-blue);
      color: var(--pkt-color-tag-text-focus);

      svg {
        --fg-color: var(--pkt-color-tag-text-focus);
      }
    }

    &.pkt-btn:active,
    &.pkt-tag--active {
      background-color: var(--pkt-color-surface-strong-blue);
      color: var(--pkt-color-tag-text-active);

      svg {
        --fg-color: var(--pkt-color-tag-text-active);
      }
    }
  }

  &.pkt-tag--blue-dark {
    background: var(--pkt-color-brand-dark-blue-1000);
    color: var(--pkt-color-brand-neutrals-200);
    --fg-color: var(--pkt-color-brand-neutrals-200);

    &.pkt-btn:hover,
    &.pkt-btn:focus,
    &.pkt-tag--hover {
      background-color: var(--pkt-color-brand-warm-blue-1000) !important;
      color: var(--pkt-color-brand-neutrals-200) !important;
      --fg-color: var(--pkt-color-brand-neutrals-200) !important;
    }
  }

  // Sizes
  &.pkt-tag--small {
    padding: 0 map.get(variables.$spacing, 'size-4');
    line-height: 1.375rem;
  }

  &.pkt-tag--medium {
    padding: 0 map.get(variables.$spacing, 'size-8');
    line-height: 1.875rem;
  }

  &.pkt-tag--large {
    padding: 0 map.get(variables.$spacing, 'size-8');
    @include typography.get-text-style('pkt-txt-18-medium');
    line-height: 2.25rem;
  }

  // Typography
  &.pkt-tag--normal-text {
    @include typography.get-text-style('pkt-txt-14-medium');
  }

  &.pkt-tag--thin-text {
    @include typography.get-text-style('pkt-txt-14-light');
  }
}