// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as t;
@use "ds/colors.scss" as *;
@use "ds/mixins.scss" as *;
@use "ds/_utils.scss" as *;

.token-field {
  --token-field-bg-color: var(--color-background-tertiary);
  --token-field-icon-color: var(--color-foreground-secondary);
  --token-field-outline-color: none;
  --token-field-height: var(--sp-xxxl);
  --token-field-margin: unset;

  display: inline-flex;
  column-gap: var(--sp-xs);
  align-items: center;
  inline-size: 100%;
  background: var(--token-field-bg-color);
  border-radius: $br-8;
  padding-inline-end: var(--sp-xs);
  outline: $b-1 solid var(--token-field-outline-color);
  position: relative;

  &:hover {
    --token-field-bg-color: var(--color-background-quaternary);
  }

  &:focus {
    --token-field-bg-color: var(--color-background-primary);
    --token-field-outline-color: var(--color-accent-primary);
  }
}

.token-field-wrapper {
  inline-size: 100%;
}

.with-icon {
  grid-template-columns: auto 1fr;
}

.token-field-disabled {
  user-select: none;

  --token-field-bg-color: var(--color-background-primary);
  --token-field-outline-color: var(--color-background-quaternary);

  &:hover {
    --token-field-bg-color: var(--color-background-primary);
    --token-field-outline-color: var(--color-background-quaternary);
  }
}

.pill {
  --pill-border-color: var(--color-token-border);
  --pill-bg-color: var(--color-background-tertiary);
  --pill-fg-color: var(--color-token-foreground);

  @include t.use-typography("code-font");
  @include text-ellipsis;

  display: block;
  block-size: var(--sp-xxl);
  inline-size: fit-content;
  background: var(--pill-bg-color);
  cursor: pointer;
  border: $b-1 solid var(--pill-border-color);
  color: var(--pill-fg-color);
  border-radius: $br-6;
  padding-inline: $sz-6;
  max-inline-size: 100%;

  &:hover {
    --pill-bg-color: var(--color-token-background);
    --pill-fg-color: var(--color-foreground-primary);
    --pill-border-color: var(--color-token-foreground);
  }

  &:focus-visible {
    --pill-bg-color: var(--color-token-background);
    --pill-fg-color: var(--color-foreground-primary);
    --pill-border-color: var(--color-accent-primary);

    outline: none;
  }
}

.pill-disabled {
  user-select: none;

  --pill-bg-color: none;
  --pill-fg-color: var(--color-foreground-secondary);
  --pill-border-color: var(--color-token-border);

  &:hover {
    --pill-bg-color: none;
    --pill-fg-color: var(--color-foreground-secondary);
    --pill-border-color: var(--color-token-border);
  }
}

.no-set-pill {
  --pill-bg-color: none;
  --pill-fg-color: var(--color-foreground-secondary);
  --pill-border-color: var(--color-token-border);

  position: relative;

  &:hover {
    --pill-bg-color: none;
    --pill-fg-color: var(--color-foreground-secondary);
    --pill-border-color: var(--color-token-border);
  }
}

.pill-dot {
  inline-size: $sz-6;
  block-size: $sz-6;
  outline: var(--sp-xxs) solid var(--color-background-primary);
  border-radius: 50%;
  background-color: var(--color-foreground-error);
  margin-inline-start: var(--sp-xs);
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
}

.invisible-button {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  opacity: var(--opacity-button);
  background-color: var(--color-background-quaternary);

  &:hover {
    background-color: var(--color-background-quaternary);

    --opacity-button: 1;
  }

  &:focus {
    background-color: var(--color-background-quaternary);

    --opacity-button: 1;
  }
}

.invisible-btn-dropdown-open {
  --opacity-button: 0;
}

.content-wrapper {
  inline-size: 100%;
}

.button-tooltip {
  inline-size: px2rem(28);
  block-size: 100%;
}