.AddClusters {
  --flex-gap: #{$unit * 2};
  $spacing: $padding * 2;

  .AceEditor {
    min-height: 200px;
    max-height: 400px;
    border: 1px solid var(--colorVague);
    border-radius: $radius;

    .theme-light & {
      border-color: var(--borderFaintColor);
    }

    .editor {
      border-radius: $radius;
    }
  }

  .Select {
    .kube-context {
      --flex-gap: #{$padding};
    }

    // todo: extract to component, merge with namespace-select.scss
    &__placeholder {
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    &__control {
      box-shadow: 0 0 0 1px $borderFaintColor;
    }
  }

  code {
    color: $pink-400;
  }

  .text-primary {
    color: var(--textColorAccent);
  }

  .hint {
    display: block;
    padding-top: 6px;
  }
}
