:host {
  display: inline-block;
}

button {
  display: flex;
  gap: var(--scale-100);
  justify-content: center;
  align-items: center;
  padding: var(--scale-200);
  color: var(--color-text-body);
  border: none;
  background-color: var(--color-surface-primary);
  font-family: var(--font-family-body);

  span {
    background-color: var(--color-surface-primary);
    padding: var(--scale-25) var(--scale-150);
    font-weight: var(--font-weight-regular);
    border: var(--border-width-sm) solid var(--color-border-primary);
    border-radius: var(--border-radius-md);
  }

  &:not(.disabled):hover {
    cursor: pointer;
    background-color: var(--color-surface-action-solid-hover-light);
    color: var(--color-text-action-hover);
    border-color: var(--color-surface-action-solid-hover-light);

    span {
      background-color: var(--color-surface-action-solid-hover-light);
      border: var(--border-width-sm) solid var(--color-icon-action);
      border-radius: var(--border-radius-md);
      color: var(--color-text-action);
    }
  }

  &:focus-visible {
    outline: var(--border-width-sm) solid var(--color-border-focus);
    outline-offset: 1px;
    border-radius: var(--border-radius-md);
  }

  &.active {
    font-weight: var(--font-weight-semibold);
    border-bottom: var(--border-width-md) solid var(--color-icon-action);

    &:not(.disabled):hover {
      border-bottom: var(--border-width-md) solid var(--color-icon-action);
    }
  }

  &.disabled {
    cursor: not-allowed;
    color: var(--color-text-disabled);
    border: var(--border-width-sm) transparent;

    span {
      color: var(--color-text-disabled-on);
      border-color: var(--color-icon-disabled);
    }

    &.active {
      border-bottom: var(--border-width-md) solid var(--color-border-disabled);
    }
  }
}