html {
  background-color: var(--color-page-background);
  color: var(--color-page-text);

  body {
    background-color: inherit;
  }
}

.login-form {
  background-color: var(--color-form-background);
  box-shadow: var(--box-shadow-form);
  color: var(--color-form-text);
  padding: var(--spacing-form);
  width: 100vw;

  @media (min-width: 420px) {
    border-radius: var(--border-radius-form);
    padding: var(--spacing-form-desktop);
    width: auto;
  }

  // Note: nested for specificity priority against silverstripe/admin styles
  .login-form-control--text .login-form-control__field,
  input.text,
  input.text:focus {
    background-color: var(--color-field-background);
    border: 1px solid var(--color-field-border);
    border-radius: var(--border-radius-field);
    color: var(--color-field-text);
    padding: var(--spacing-field-content);
    width: 100%;

    @media (min-width: $mobile-breakpoint) {
      width: var(--sizing-content-width);
    }
  }
}

.login-form__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  a {
    margin-bottom: 11px;
  }
}

.login-form__title {
  margin-top: 0;
}

.login-form__content,
.login-form__message,
.message {
  max-width: var(--sizing-content-width);
}

.login-form__message--warning,
.message.warning {
  color: var(--color-message-warning);
}

.login-form__message--error,
.message.bad,
.message.error,
.message.required {
  color: var(--color-message-error);
}

.login-form__fields,
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.login-form__help-icon {
  cursor: pointer;
}

.login-form-control,
.field {
  margin-bottom: var(--spacing-form-controls);
}

.login-form-control--text .login-form-control__label,
.field.text label {
  display: block;
  margin-bottom: var(--spacing-form-label-bottom);
}

.login-form-actions,
.btn-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.action {
  background-color: var(--color-button-secondary-background);
  border: 1px solid currentColor;
  border-radius: var(--border-radius-field);
  color: var(--color-button-secondary-text);
  cursor: pointer;
  padding: var(--spacing-submit-content);
}

.btn {
  border-radius: var(--border-radius-field);
  padding: var(--spacing-submit-content);

  &.disabled,
  &.readonly,
  &:disabled,
  &[readonly] {
    cursor: not-allowed;
  }
}

.btn-success,
.btn-primary,
input[type="submit"] {
  background-color: var(--color-button-primary-background);
  color: var(--color-button-primary-text);
  border: 0;

  // Disabled styles
  &.disabled,
  &.readonly,
  &:disabled,
  &[readonly] {
    &,
    &:focus,
    &.focus,
    &:active,
    &.active,
    &:hover {
      border-color: var(--color-button-primary-hover-background);
      background-color: var(--color-button-primary-hover-background);
      color: var(--color-button-primary-hover-text);
    }
  }

  &:not(:disabled):not(.disabled) {
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      background-color: var(--color-button-primary-hover-background);
      border-color: var(--color-button-primary-hover-background);
      color: var(--color-button-primary-hover-text);
    }
  }
}

.btn-secondary {
  border-color: transparent;
  background-color: transparent;
  color: var(--color-button-secondary-text);

  // Disabled styles
  &.disabled,
  &.readonly,
  &:disabled,
  &[readonly] {
    &,
    &:focus,
    &.focus,
    &:active,
    &.active,
    &:hover {
      border-color: transparent;
      background-color: transparent;
      color: var(--color-button-secondary-hover-text);
    }
  }

  &:not(:disabled):not(.disabled) {
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      background-color: var(--color-button-secondary-hover-background);
      border-color: var(--color-button-secondary-hover-background);
      color: var(--color-button-secondary-hover-text);
    }
  }
}

input[type="checkbox"] {
  position: relative;
  top: 2px;
}

.field {
  .font-icon-help-circled {
    margin-left: 5px;
    font-size: 16px;
    color: var(--color-link-primary);
    vertical-align: middle;
    position: relative;
    top: 1px;
  }
}

.popover {
  background-color: var(--color-form-background);
  border-color: var(--color-field-border);

  // Style the notch on the popup bottle for each possible position
  $positions: top, bottom, left, right;
  @each $pos in $positions {
    &.bs-popover-auto[x-placement^="#{$pos}"],
    &.bs-popover-#{$pos} {
      & > .arrow::before {
        border-#{$pos}-color: var(--color-field-border);
      }

      & > .arrow::after {
        border-#{$pos}-color: var(--color-form-background);
      }
    }
  }

  .popover-header + .popover-body {
    color: var(--color-form-text);
    padding: 12px 15px;
    font-size: 13px;
  }
}