@import '../../mixins/focus-state';

/* Styling for slotted content */
::slotted(*) {
  display: inline-flex;
  align-items: center;
}

:host {
  ::slotted([slot='label']) {
    padding-top: 2px;
  }
}

/* Component styling */

.component {
  .tds-chip-component {
    display: inline-flex;

    label {
      background-color: var(--tds-chips-background);
      color: var(--tds-chips-color);
      font: var(--tds-detail-02);
      letter-spacing: var(--tds-detail-02-ls);
      display: inline-flex;
      align-items: center;
      border-radius: 16px;
      cursor: pointer;
      white-space: nowrap;

      &:hover {
        background-color: var(--tds-chips-background-hover);
      }
    }

    &.disabled {
      label {
        background-color: var(--tds-chips-background-disabled);
        color: var(--tds-chips-text-disabled);
        cursor: default;
        pointer-events: none;
      }

      input {
        pointer-events: none; // Ensure input does not respond to interactions
      }

      input[type='radio']:checked:disabled + label {
        background-color: var(--tds-chips-background-active-disabled);
        color: var(--tds-chips-text-checked-disabled);
      }

      input[type='checkbox']:checked:disabled + label {
        background-color: var(--tds-chips-background-active-disabled);
        color: var(--tds-chips-text-checked-disabled);
      }
    }

    &.lg {
      label {
        height: 32px;
        padding: 0 16px;
        gap: 8px;
      }
    }

    &.sm {
      label {
        height: 24px;
        padding: 0 12px;
        gap: 6px;
      }
    }

    &.sm.prefix {
      label {
        padding: 0 12px 0 6px;
      }
    }

    &.sm.suffix {
      label {
        padding: 0 6px 0 12px;
      }
    }

    &.lg.prefix {
      label {
        padding: 0 16px 0 8px;
      }
    }

    &.lg.suffix {
      label {
        padding: 0 8px 0 16px;
      }
    }

    &.lg.prefix.suffix {
      label {
        padding: 0 8px;
      }
    }

    &.sm.prefix.suffix {
      label {
        padding: 0 6px;
      }
    }

    input {
      opacity: 0;
      position: absolute;
      z-index: -1;
    }

    input:focus-visible + label {
      @include tds-focus-state;

      background-color: var(--tds-chips-background-focus);
    }

    input:checked + label {
      background-color: var(--tds-chips-background-active);
      color: var(--tds-chips-color-active);

      &:hover {
        background-color: var(--tds-chips-background-active-hover);
      }
    }
  }
}