.create-title {
  box-sizing: border-box;

  color: var(--slate-12);

  font-size: var(--font-size-2);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-2);
  line-height: var(--line-height-2);

  input {
    accent-color: transparent;

    outline: none;
  }

  .create-title__header {
    display: flex;
    margin-bottom: var(--spacing-2);

    font-size: var(--font-size-1);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-1);
    line-height: var(--line-height-1);

    .form-indicator {
      display: inline-block;
      padding-right: var(--spacing-1);
    }
  }

  .form-label {
    margin-right: auto;
    padding-right: var(--spacing-2);
  }

  .create-title__topic,
  .create-title__length {
    padding-left: var(--spacing-2);
  }

  .create-title__form {
    position: relative;
    padding: var(--spacing-1);

    border: var(--form-border);
    border-radius: var(--radius-small-3);

    background: var(--slate-1);

    &:focus-within {
      border: var(--form-border-focus-ring);

      box-shadow: var(--form-box-shadow);
    }

    &:has(.create-title__brand:focus) {
      border: var(--form-border);

      box-shadow: none;
    }
  }

  &.create-title__form--is-open {
    padding: var(--spacing-2) var(--spacing-2) var(--spacing-4);

    box-shadow: var(--shadow-4);
  }

  .create-title__indicator-separator,
  .create-title__loading-indicator,
  .create-title__value-container {
    display: none
  }

  .create-title__control {
    min-height: 0;

    border: 0;
  }

  .create-title__dropdown-indicator {
    padding: 0;
  }

  .create-title__text-input {
    position: absolute;
    top: var(--spacing-1);
    left: calc(var(--spacing-5) + var(--spacing-1));
    width: calc(100% - var(--spacing-5) - var(--spacing-1) - var(--spacing-1));
    height: var(--spacing-5);
    padding-right: var(--spacing-1);
    padding-left: var(--spacing-1);

    background: var(--slate-1);
  }

  .create-title__menu {
    position: static;
    top: auto;
    width: 100%;
    min-height: 5em;
    margin: 0 0 var(--spacing-2) 0;

    background-color: transparent;
    box-shadow: none;
  }

  .create-title__menu-list {
    margin: 0;
    padding: 0;
  }

  .create-title__option {
    margin: 0;
    padding: var(--spacing-2) var(--spacing-3);

    &:hover,
    &:focus{
      border-radius: var(--radius-small-2);

      background: var(--slate-alpha-3);
    }
  }

  .create-title__option--is-selected,
  .create-title__option--is-focused {
    background: inherit;

    color: inherit;
  }

  .create-title__brand {
    height: var(--spacing-5);
    padding: var(--spacing-1) var(--spacing-2);

    border: var(--form-border);
    border-radius: var(--radius-small-3);
    &:focus-within {
      border: var(--form-border-focus-ring);

      box-shadow: var(--form-box-shadow);
    }
  }

  .create-title__menu-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;

    justify-content: space-between;
    gap: var(--spacing-3);
  }

  .create-title__brand {
    flex-basis: 100%;
  }

  .create-title__reload .lucide-rotate-cw {
    width: var(--spacing-5);
    height: var(--spacing-5);
    padding: var(--spacing-1);

    border-radius: var(--radius-small-2);

    background: var(--blue-9);

    color: var(--white);

    cursor: pointer;
  }

  .create-title__reload:disabled .lucide-rotate-cw {
    background: var(--slate-3);

    pointer-events: none;
  }
}
