.form-label {
  margin: 0;
  padding-bottom: 5px;

  display: block;
  position: relative;

  color: var(--color-font-primary);
  font-weight: 500;
}

.form-field + .form-field {
  margin-top: 20px;
}

.form-hint {
  color: var(--color-font-secondary);
}

.form-input,
.form-select,
.form-textarea {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 10px 15px;
  border: 0;

  display: block;

  color: var(--color-font-secondary);
  font: inherit;
  font-weight: 400;

  background-color: #fff;
  border-radius: var(--corner-radius);
  box-shadow:
    inset 0 0 0 1px var(--color-border),
    var(--form-shadow);

  outline: none;
  appearance: none;
  transition: none;

  &:not(:disabled):hover {
    box-shadow:
      inset 0 0 0 2px rgba(var(--color-primary-rgb), 0.5),
      var(--form-shadow);
  }

  &::placeholder {
    color: var(--color-font-primary);

    opacity: 0.3;
  }

  &:disabled {
    color: var(--color-gray);
    cursor: not-allowed;
  }
}

.form-textarea {
  resize: none;
}

.form-input,
.form-textarea,
.form-select {
  &:not(:disabled):focus {
    box-shadow:
      inset 0 0 0 2px var(--color-primary),
      var(--form-shadow);
  }
}

.form-input--error,
.form-textarea--error,
.form-select--error {
  &:not(:disabled):focus {
    box-shadow:
      inset 0 0 0 2px var(--color-error),
      var(--form-shadow) !important;
  }

  &:not(:disabled):hover {
    box-shadow:
      inset 0 0 0 2px rgba(var(--color-red-rgb), 0.25),
      var(--form-shadow) !important;
  }

  box-shadow:
    inset 0 0 0 2px rgba(var(--color-red-rgb), 0.01),
    var(--form-shadow) !important;

  border: 1px solid var(--color-red) !important;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  padding-right: 45px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  background-position: right 10px top 10px;
  background-repeat: no-repeat;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}


.button {
  height: 40px;
  padding: 0 15px;
  border: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  font-weight: 500;

  white-space: nowrap;
  background-color: var(--color-primary);
  border-radius: var(--corner-radius);
  cursor: pointer;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--custom-button-shadow);


  &:disabled,
  &[disabled] {
    color: var(--color-font-secondary);
    background-color: var(--color-background);
    cursor: not-allowed;
  }

  &:not(:disabled):not([disabled]):hover {
    color: #fff;
    text-decoration: none;

    background-color: rgba(var(--color-primary-rgb), 0.88);
  }

  &:not(:disabled):not([disabled]):active {
    background-color: #1878ae;
  }

  &:focus,
  &:focus-visible {
    color: #fff;
    text-decoration: none;
  }
}

.button_ghost:not(:disabled):not([disabled]) {
  color: var(--color-font-primary);

  background-color: #fff;
  box-shadow:
    inset 0 0 0 1px var(--color-border),
    var(--form-shadow);

  &:hover {
    color: var(--color-font-primary);

    background-color: #fff;
    box-shadow:
      inset 0 0 0 2px rgba(var(--color-primary-rgb), 0.5),
      var(--form-shadow);
  }
  &:active {
    color: var(--color-font-primary);

    background-color: #fff;
    box-shadow:
      inset 0 0 0 2px var(--color-primary),
      var(--form-shadow);
  }
  &:focus,
  &:focus-visible {
    color: var(--color-font-primary);
  }
}

.button_wide {
  width: 100%;
}

.button__icon {
  width: 1.3em;
  height: 1.3em;
}

.button_loading {
  &::before {
    content: "";
    width: 1.2em;
    height: 1.2em;
    margin-right: 10px;
    border: 2px solid currentColor;
    border-top-color: transparent;

    display: block;

    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
}

.button_loading .button__icon {
  display: none;
}

.button_small .button__icon {
  width: 1.2em;
  height: 1.2em;
}

.button__icon_left {
  margin-right: 8px;
}

.button__icon_right {
  margin-left: 8px;
}

.button__icon_spin {
  animation: spin 2s infinite linear;
}

.inline-link {
  all: unset;

  color: var(--color-primary);
  text-decoration: rgba(var(--color-primary-rgb), 0.5) underline dashed !important;

  cursor: pointer;
  transition: text-decoration 0.2s;

  &:hover,
  &:focus,
  &:focus-visible {
    color: var(--color-primary);
    text-decoration-color: var(--color-primary) !important;
  }
}