import { css } from 'lit'

/**
 * Common styles for API modeling editors.
 * These styles define reusable patterns for editor containers, headers,
 * tabs, sections, descriptions, and help elements.
 */
export default css`
  .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }

  /* Editor header section */
  .intro {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
  }

  .header {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: stretch;

    ui-icon {
      color: var(--md-sys-color-primary);
    }

    .headline-medium {
      flex: 1 0 0;
      color: var(--md-sys-color-on-surface);
    }

    .close-button {
      color: var(--md-sys-color-on-surface);
    }
  }

  .description {
    color: var(--md-sys-color-on-surface-variant);
    align-self: stretch;
  }

  .tabs {
    align-self: stretch;
  }

  /* Configuration sections */

  .configuration-tab {
    display: flex;
    padding: 12px 20px;
    flex-direction: column;
    gap: 20px;
    align-self: stretch;
  }

  .config-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }

  .config-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
  }

  .section-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    color: var(--md-sys-color-on-surface);

    .title-large {
      flex: 1 0 0;
    }
  }

  .section-description {
    color: var(--md-sys-color-on-surface-variant);
    align-self: stretch;
  }

  /* Form elements */
  .form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }

  .form-label {
    color: var(--md-sys-color-on-surface);
    font-size: 14px;
    font-weight: 500;
  }

  .form-field {
    align-self: stretch;
  }

  /* Chips and lists */
  .fields-list {
    align-self: stretch;

    .field-list-item::part(surface) {
      padding-inline: 0;
    }
  }

  /* Action buttons */
  .add-button {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .access-configuration,
  .rate-limiting-configuration {
    padding: 12px 20px;
  }

  .row {
    align-self: stretch;
  }
`
