$gray: #c5c5c5;
$darkGray: gray;
$border: 1px solid $gray;

.cmf-dialog__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 600px;
  padding: 0 20px;
}

.form-control {
  display: flex;
  flex-direction: column;
  width: 100%;

  label {
    padding-bottom: 5px;
  }
}

.input {
  flex: 1;

  width: initial;
  margin-bottom: 10px;
  padding: 4px 8px;

  background: transparent;
  border: $border;
  border-radius: 3px;

  transition: border-color 0.2s ease;

  &.borderless {
    border: none;
  }

  &:focus-visible {
    border-color: $darkGray;
    outline: none;
  }
}

.required {
  position: relative;

  &::after {
    content: '*';
    position: absolute;
    top: 0;
    color: var(--default-color-red);
  }
}

.actions {
  display: flex;
  gap: 10px;
}