// =============================================================================
// International Press Zone - Tabs Component
// =============================================================================
// Tab navigation and tab panel styles
// =============================================================================

@use '../globals' as *;

// Variables and mixins are provided via `@use '../globals' as *;`.

.international-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid $border-color;
  margin-bottom: 24px;

  &__item {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: $text-secondary;
    transition: all $presszone-international-duration-fast ease;
    display: flex;
    align-items: center;
    gap: 8px;

    &:hover {
      color: $text-primary;
      background: $background-light;
    }

    &--active {
      color: $primary-color;
      border-bottom-color: $primary-color;
      font-weight: 600;
      background: rgba($primary-color, 0.05);
    }

    &:focus-visible {
      outline: 2px solid $primary-color;
      outline-offset: -2px;
      border-radius: $border-radius-md;
    }
  }

  &__icon {
    display: inline-flex;
    align-items: center;
  }

  &__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: $text-secondary;
    color: $background-white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;

    .international-tabs__item--active & {
      background: $primary-color;
    }
  }

  &__panel {
    display: none;

    &.active,
    &[aria-hidden="false"] {
      display: block;
      animation: presszone-international-tab-panel-fade-in 0.3s ease;
    }
  }
}