@use '../globals' as *;

// =============================================================================
// International Press Zone - Card Component
// =============================================================================
// Settings card and general card styles
// =============================================================================

$background-white: #ffffff !default;
$background-light: #f0f0f1 !default;
$border-color: #c3c4c7 !default;
$border-radius-lg: 8px !default;
$border-radius-md: 4px !default;
$text-primary: #1e1e1e !default;
$text-secondary: #757575 !default;
$warning-color: #f0b849 !default;

// Settings Card Component
.international-settings-card {
  background: $background-white;
  border: 1px solid $border-color;
  border-radius: $border-radius-lg;
  margin-bottom: 20px;
  overflow: hidden;

  // Card Header - Icon + Title/Description in a ROW
  &__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid $border-color;
    cursor: default;
  }

  // Icon container - inline with title
  &__icon {
    flex-shrink: 0;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // Title
  &__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: $text-primary;
    line-height: 1.3;
  }

  // Description
  &__desc {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: $text-secondary;
    line-height: 1.4;
  }

  // Card Body
  &__body {
    padding: 20px 24px;
  }

  // Info blocks inside settings cards
  &__info {
    padding: 12px 16px;
    background: $background-light;
    border-radius: $border-radius-md;
    font-size: 13px;
    color: $text-secondary;
  }

  // Collapsible state
  &--collapsible {
    .international-settings-card__header {
      cursor: pointer;
      transition: background-color 0.15s;

      &:hover {
        background: $background-light;
      }
    }
  }

  &--collapsed {
    .international-settings-card__body {
      display: none;
    }

    .international-settings-card__header {
      border-bottom: none;
    }
  }

  // Warning state
  &--warning {
    border-color: $warning-color;

    .international-settings-card__header {
      background: rgba($warning-color, 0.1);
      border-bottom-color: rgba($warning-color, 0.3);
    }
  }
}

// Generic Card Component
.international-card {
  background: $background-white;
  border: 1px solid $border-color;
  border-radius: $border-radius-lg;
  padding: 20px;
}