/*
 * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@reference '@accelint/design-foundation/styles';

@layer components.l1 {
  .field {
    @apply gap-xs flex flex-col;
  }

  .control {
    @apply fg-primary-bold gap-m rounded-medium pl-s pr-xs py-xs font-display outline-interactive flex w-full items-center outline;

    min-width: var(--min-width, unset);

    @variant group-size-medium/coordinate-field {
      @apply text-body-s;
    }

    @variant group-size-small/coordinate-field {
      @apply text-body-xs;
    }

    @variant group-disabled/coordinate-field {
      @apply fg-disabled outline-interactive-disabled;
    }

    @variant group-invalid/coordinate-field {
      @apply outline-serious-bold;
    }

    @variant hover {
      @apply outline-interactive-hover;
    }

    @variant read-only {
      @apply px-0 outline-none;
    }
  }

  .input {
    @apply flex items-center;

    &.inline {
      @apply w-full flex-row;
    }

    &.stacked {
      @apply w-full flex-col items-end;
    }
  }

  .literal {
    @apply fg-primary-muted pr-xs;
  }

  .segment {
    @apply shrink-0 text-right uppercase transition-[width] duration-150 ease-in-out outline-none;

    @variant placeholder-shown {
      @apply fg-primary-muted;
    }

    @variant focus-visible {
      @apply fg-a11y-on-accent bg-accent-primary-bold;
    }

    @variant selection {
      @apply fg-a11y-on-accent bg-accent-primary-bold;
    }

    @variant read-only {
      @variant focus-visible {
        @apply bg-surface-default;
      }

      @variant selection {
        @apply bg-surface-default;
      }
    }
  }

  .segmentGroup {
    @apply w-full;

    &.stacked {
      @apply w-full text-right;
    }
  }

  .description {
    @apply fg-primary-muted text-body-xs;

    @variant group-disabled/coordinate-field {
      @apply fg-disabled;
    }
  }

  .error {
    @apply fg-serious-bold text-body-xs;
  }

  .formatRow {
    @apply gap-s px-xs py-s flex items-start justify-between;
  }

  .formatLabels {
    @apply flex min-w-0 flex-1 flex-col;
  }

  .formatLabel {
    @apply fg-primary-bold text-body-s;
  }

  .formatValue {
    @apply fg-primary-muted font-display text-body-s truncate;
  }

  .formatOptionContent {
    @apply gap-xs flex flex-1 flex-col;
  }

  .formatOptionLabel {
    @apply fg-primary-bold text-body-s font-bold;
  }

  .formatOptionValue {
    @apply fg-primary-muted font-display text-body-xs break-all;
  }

  .modalDescription {
    @apply fg-primary-muted mb-m text-body-s;
  }
}

@layer components.l2 {
  .formatButton {
    @apply py-0;
  }

  .formatOptions {
    @apply mb-m gap-xs flex flex-col;
  }

  .modalTitle {
    @apply fg-primary-bold mb-s text-header-s font-bold;
  }

  .modalActions {
    @apply gap-s flex justify-end;
  }

  .popover {
    min-height: 280px;
  }

  .popoverTitle {
    @apply fg-primary-muted text-header-s;
  }

  .hiddenTrigger {
    @apply hidden;
  }
}