tuliprox/frontend/scss/app/components/config/_panel_api_config.scss

@use "../../../size" as size;

.tp__panel-api-config-view {
  &__info-text {
    color: var(--modest-text-color);
    line-height: 1.35;
  }

  &__input-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap-default);
    box-sizing: border-box;
    width: 100%;
  }

  &__input-title {
    display: flex;
    flex-flow: column;
    gap: var(--gap-micro);
  }

  &__input-badges {
    display: flex;
    flex-flow: row wrap;
    gap: var(--gap-small);
  }

  &__input-subtitle {
    color: var(--modest-text-color);
    font-size: var(--font-size-base);
  }

  &__input-status {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    gap: var(--gap-small);
  }

  &__credits-chip {
    color: var(--warn-color);
    border-color: var(--warn-color);
    background: var(--warn-background-color);
  }

  &__toggle {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: var(--gap-small);
  }

  &__disabled-hint {
    color: var(--modest-text-color);
    border: 1px dashed var(--card-border-color);
    border-radius: var(--border-radius);
    padding: var(--padding-small);
  }

  &__summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-default);
    width: 100%;

    @media (max-width: size.$mobile-breakpoint) {
      grid-template-columns: 1fr;
    }
  }

  &__section {
    display: flex;
    flex-flow: column;
    gap: var(--gap-default);
    padding-top: var(--padding-default);
    border-top: 1px solid var(--card-border-color);
  }

  &__section-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-default);

    h2 {
      font-size: var(--font-size-md);
      margin: 0;
    }
  }

  &__section-actions {
    display: flex;
    flex-flow: row nowrap;
    gap: var(--gap-small);
  }

  &__params {
    display: flex;
    flex-flow: column;
    gap: var(--gap-small);
  }

  &__param-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--gap-small);
    align-items: flex-end;

    .tp__form-field {
      min-width: 0;
    }
  }

  &__param-row--view {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  &__param-remove {
    margin-bottom: 0.35rem;
  }

  &__param-view {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-default);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius);
    padding: var(--padding-small);
    width: 100%;

    .k {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      color: var(--label-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 40%;
    }

    .v {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      color: var(--modest-text-color);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 60%;
    }
  }

  &__errors {
    border-top: 1px solid var(--card-border-color);
    padding-top: var(--padding-default);
    color: var(--warn-color);

    ul {
      padding-left: 1.25rem;
      margin: 0;
    }
  }
}