.create-meta-description {
  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);

  textarea,
  input {
    accent-color: transparent;

    outline: none;
  }

  &:focus-within {
    border-color: var(--blue-9);
  }

  .create-meta-description__header {
    display: flex;
    margin: var(--spacing-5) 0 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);
    }
  }

  .create-meta-description__label {
    margin-right: auto;
    padding-right: var(--spacing-2);
  }

  .create-meta-description__topic,
  .create-meta-description__length {
    padding-left: var(--spacing-2);
  }

  .create-meta-description__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);
    }
  }

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

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

  .create-meta-description__indicator-separator,
  .create-meta-description__loading-indicator,
  .create-meta-description__value-container {
    display: none
  }

  .create-meta-description__control {
    min-height: 0;

    border: 0;
  }

  .create-meta-description__dropdown-indicator {
    width: var(--spacing-5);
    height: var(--spacing-5);
    padding: 0;

    border: 1px solid var(--blue-9);
    border-radius: var(--radius-small-2);

    background: var(--blue-9);

    cursor: pointer;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  .create-meta-description__textarea {
    position: relative;
    left: var(--spacing-5);
    width: calc(100% - var(--spacing-5) - var(--spacing-1) - var(--spacing-1));
    min-height: calc(var(--spacing-5) * 2 + var(--spacing-1));
    margin-top: calc(0% - var(--spacing-5));
    padding: var(--spacing-1);

    background: var(--slate-1);

    resize: vertical;
  }

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

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

  .create-meta-description__menu-list {
    margin: 0;
    padding: 0;

  }

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

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

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

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

    color: inherit;
  }

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

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

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

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

  .create-meta-description__brand {
    flex-basis: 100%;
  }

  .create-meta-description__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-meta-description__reload:disabled .lucide-rotate-cw {
    background: var(--slate-3);

    pointer-events: none;
  }
}
