@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  .cinder-access-gate {
    color: var(--cinder-text-default);
  }

  .cinder-access-gate__passthrough {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    max-inline-size: 100%;
    vertical-align: baseline;
  }

  .cinder-access-gate__passthrough:has(> [data-cinder-full-width]) {
    display: flex;
    inline-size: 100%;
  }

  .cinder-access-gate__passthrough:has(> .cinder-form-field > [data-cinder-full-width]) {
    display: flex;
    inline-size: 100%;
  }

  .cinder-access-gate__passthrough:where(
    :has(> [data-cinder-icon-only]):has(> :nth-child(2)):not(:has(> :not([data-cinder-icon-only])))
  ) {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cinder-space-2);
    inline-size: auto;
  }

  .cinder-access-gate__passthrough[data-cinder-variant='section'] {
    display: contents;
    inline-size: auto;
  }

  .cinder-access-gate[data-cinder-variant='inline'] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--cinder-space-2);
    max-inline-size: 100%;
    vertical-align: baseline;
  }

  .cinder-access-gate__inline-content {
    display: inline-flex;
    gap: var(--cinder-space-2);
    min-inline-size: 0;
  }

  .cinder-access-gate__inline-content:has(> [data-cinder-full-width]) {
    display: flex;
    inline-size: 100%;
  }

  .cinder-access-gate__inline-content:has(> .cinder-form-field > [data-cinder-full-width]) {
    display: flex;
    inline-size: 100%;
  }

  .cinder-access-gate[data-cinder-variant='inline']:has(
      .cinder-access-gate__inline-content > [data-cinder-icon-only]
    ) {
    align-items: center;
  }

  .cinder-access-gate__inline-content [data-cinder-access-gate-control] {
    color: var(--cinder-text-disabled);
    cursor: not-allowed;
    opacity: 0.6;
  }

  .cinder-access-gate__inline-reason {
    position: relative;
    display: inline-block;
    align-self: first baseline;
    flex: 1 1 auto;
    min-inline-size: 0;
    padding-inline-start: calc(0.875rem + var(--cinder-space-1));
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-xs);
    line-height: var(--cinder-leading-snug);
  }

  .cinder-access-gate__inline-reason > svg {
    position: absolute;
    inset-block-start: 0.1em;
    inset-inline-start: 0;
  }

  .cinder-access-gate__inline-reason > span {
    overflow-wrap: anywhere;
  }

  .cinder-access-gate[data-cinder-variant='section'] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--cinder-space-3);
    align-items: start;
    inline-size: 100%;
    padding-block: var(--cinder-space-6);
    padding-inline: var(--cinder-space-5);
    border: 1px dashed var(--cinder-border);
    border-radius: var(--cinder-radius-md);
    background: var(--cinder-surface);
  }

  .cinder-access-gate__section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--cinder-radius-md);
    background: var(--cinder-surface-raised);
    color: var(--cinder-text-muted);
  }

  .cinder-access-gate__section-copy {
    display: grid;
    gap: var(--cinder-space-1);
    min-inline-size: 0;
  }

  .cinder-access-gate__requirement {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cinder-space-1) var(--cinder-space-2);
    align-items: baseline;
    margin-block-start: var(--cinder-space-2);
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-xs);
    line-height: var(--cinder-leading-snug);
  }

  .cinder-access-gate__requirement-label {
    font-weight: var(--cinder-font-medium);
  }

  .cinder-access-gate__requirement-value {
    padding-block: var(--cinder-space-0-5);
    padding-inline: var(--cinder-space-1);
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-sm);
    background: var(--cinder-surface-raised);
    color: var(--cinder-text-default);
    font-family: var(--cinder-font-mono);
    font-size: 0.92em;
  }

  @media (forced-colors: active) {
    .cinder-access-gate[data-cinder-variant='section'] {
      border-color: CanvasText;
    }

    .cinder-access-gate__section-icon,
    .cinder-access-gate__requirement-value {
      border: 1px solid CanvasText;
    }
  }
}