ichaly_cohere/src/styles.scss

@reference "tailwindcss";

.cohere-settings-root {
  container-type: inline-size;
}

.cohere-status-bar-item {
  @apply flex items-center gap-1 text-xs;
  color: var(--text-muted);
}

.cohere-status-bar-item.is-hidden {
  display: none;
}

.cohere-panel {
  @apply w-full max-w-3xl pb-6;
  color: var(--text-normal);
}

.cohere-panel *,
.cohere-panel *::before,
.cohere-panel *::after {
  @apply box-border;
}

.cohere-header {
  @apply mb-4 flex items-start justify-between gap-3;
}

.cohere-subtitle,
.cohere-row-copy p {
  @apply m-0;
  color: var(--text-muted);
}

.cohere-title {
  @apply m-0 p-0 text-2xl font-bold leading-tight;
  color: var(--text-normal);
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
  text-align: left;
  text-indent: 0;
}

.cohere-subtitle {
  @apply mt-1 text-sm leading-6;
}

.cohere-card {
  @apply mb-5 rounded-xl p-0;
  background: var(--background-secondary);
}

.cohere-row {
  @apply relative flex items-center justify-between gap-5 px-5 py-4;
}

.cohere-row::after {
  content: "";
  position: absolute;
  inset-inline: 1.25rem;
  bottom: 0;
  height: 1px;
  background: var(--background-modifier-border);
}

.cohere-row:last-child::after {
  display: none;
}

.cohere-row-copy {
  @apply min-w-0 flex-1 p-0 text-left;
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;

  h3 {
    @apply m-0 p-0 text-left text-base font-semibold leading-6;
    color: var(--text-normal);
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;
    text-indent: 0;
  }

  p {
    @apply mt-0.5 p-0 text-left text-sm leading-5;
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;
    text-indent: 0;
  }
}

.cohere-row-title {
  @apply flex items-center justify-between gap-3;
}

.cohere-inline-switch {
  @apply flex h-6 shrink-0 cursor-pointer items-center gap-2 self-center whitespace-nowrap text-sm font-medium leading-none;
  color: var(--text-muted);

  > span:first-child {
    @apply flex h-6 items-center;
  }

  .cohere-switch {
    @apply mt-0;
  }
}

.cohere-link-button {
  @apply shrink-0 cursor-pointer rounded px-2 py-1 text-xs font-semibold leading-4 transition;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text-muted);
}

.cohere-link-button:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.cohere-control,
.cohere-control-wide {
  @apply w-80 shrink-0;
}

.cohere-control input,
.cohere-control select {
  @apply h-9 w-full min-w-0 rounded-md px-3 py-2 text-sm outline-none transition;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  color: var(--text-normal);
}

.cohere-control input:focus,
.cohere-control select:focus {
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
}

.cohere-control input::placeholder {
  color: var(--text-faint);
}

.cohere-secret-field {
  @apply flex h-9 min-w-0 items-center rounded-md;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);

  &:focus-within {
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
  }

  input {
    @apply h-full flex-1 border-0 bg-transparent pr-2;
    box-shadow: none;
  }

  input:focus {
    border-color: transparent;
    box-shadow: none;
  }

  .cohere-icon-button {
    @apply mr-1 flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded transition;
    appearance: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--text-muted);
    min-width: 32px;
    padding: 0 !important;
  }

  .cohere-icon-button .svg-icon,
  .cohere-icon-button svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2;
  }

  .cohere-icon-button:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
  }

  .cohere-icon-button:focus,
  .cohere-icon-button:focus-visible {
    box-shadow: none !important;
    outline: none;
  }
}

.cohere-readonly {
  @apply flex min-w-0 shrink-0 items-center justify-end gap-3;
  width: min(380px, 58%);
}

.cohere-readonly code {
  @apply min-w-0 flex-1 break-all text-right text-xs leading-5;
  color: var(--text-normal);
}

.cohere-primary {
  @apply shrink-0 cursor-pointer rounded-md border-0 px-3 py-2 text-sm font-semibold leading-5 transition;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}

.cohere-secondary {
  @apply shrink-0 cursor-pointer rounded-md px-3 py-2 text-sm font-semibold leading-5 transition;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  color: var(--text-normal);
}

.cohere-primary:hover,
.cohere-secondary:hover {
  @apply opacity-90;
}

.cohere-primary:active,
.cohere-secondary:active {
  @apply translate-y-px;
}

.cohere-switch {
  @apply relative block h-6 w-11 shrink-0 cursor-pointer;

  input {
    @apply sr-only;
  }

  span {
    @apply absolute inset-0 rounded-full transition;
    background: var(--background-modifier-border);
  }

  span::before {
    @apply absolute left-1 top-1 h-4 w-4 rounded-full transition;
    background: var(--background-primary);
    content: "";
  }

  input:checked + span {
    background: var(--interactive-accent);
  }

  input:checked + span::before {
    @apply translate-x-5;
  }
}

.cohere-toggle-row {
  @apply flex items-center justify-between gap-5;

  .cohere-row-copy {
    @apply mb-0;
  }
}

.cohere-release-control {
  @apply flex items-center justify-end;
}

.cohere-device-control {
  @apply flex items-center gap-3;

  .cohere-link-button {
    @apply h-9;
  }

  input {
    @apply min-w-0 flex-1;
  }
}

.cohere-row-block {
  @apply block;
}

.cohere-row-block .cohere-row-copy {
  @apply mb-3;
}

.cohere-config-display {
  @apply min-h-48 rounded-md p-3 font-mono text-xs leading-5;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  color: var(--text-normal);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.cohere-action-row {
  @apply mt-3 flex gap-2;
}

.cohere-action-row button {
  @apply flex-1;
}

.cohere-action-row .cohere-secondary {
  @apply mt-0;
}

@container (max-width: 640px) {
  .cohere-header {
    @apply block;
    padding-top: max(2rem, env(safe-area-inset-top, 0px));
  }

  .cohere-card {
    @apply mb-4 rounded-lg;
  }

  .cohere-row {
    @apply block px-4 py-4;
  }

  .cohere-row::after {
    inset-inline: 1rem;
  }

  .cohere-row-copy {
    @apply mb-2;
  }

  .cohere-toggle-row {
    @apply flex gap-4;

    .cohere-row-copy {
      @apply mb-0;
    }
  }

  .cohere-row-title {
    @apply items-center;
  }

  .cohere-row:not(.cohere-toggle-row) .cohere-inline-switch .cohere-switch {
    @apply mt-0;
  }

  .cohere-control,
  .cohere-control-wide,
  .cohere-readonly {
    @apply w-full;
  }

  .cohere-readonly {
    @apply flex-col items-stretch gap-2;
  }

  .cohere-readonly code {
    @apply text-left;
  }

  .cohere-primary,
  .cohere-secondary {
    @apply w-full;
  }

  .cohere-release-control {
    @apply justify-stretch;
  }

  .cohere-device-control {
    @apply flex-col items-stretch gap-2;

    .cohere-link-button {
      @apply w-full;
    }
  }

  .cohere-row:not(.cohere-toggle-row) > .cohere-switch {
    @apply mt-2;
  }
}

@media (max-width: 560px) {
  .cohere-title {
    @apply text-xl;
  }
}