/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

@import './skin';
@import './layout';
%form h2,
.modal-dialog-body h2 {
  @extend %display-400-semibold;
}
/* TODO: This is positioning the element */
/* probably should be in a special %form class*/
%form-element {
  @extend %form-row;
}
%form-element > span {
  @extend %form-element-label;
}
%form button + em,
%form-element > em {
  @extend %form-element-note;
}
%form-element-note > code {
  @extend %inline-code;
}
%form-element-error > strong {
  @extend %inline-alert-error;
}
%form-element [type='text'],
%form-element [type='password'],
%form-element textarea {
  @extend %form-element-text-input;
}
%form-element-text-input:hover {
  @extend %form-element-text-input-hover;
}
%form-element-text-input:focus {
  @extend %form-element-text-input-focus;
}

/* project level*/
label span {
  @extend %user-select-none;
}
.has-error {
  @extend %form-element-error;
}
// TODO: float right here is too specific, this is currently used just for the role/policy selectors
.type-dialog {
  float: right;
}
.type-toggle {
  @extend %form-element, %sliding-toggle;
}
.checkbox-group {
  @extend %checkbox-group;
}
%main-content form {
  @extend %form;
}
span.label {
  @extend %form-element-label;
}
%form table,
%radio-group,
%checkbox-group {
  @extend %form-row;
}
%radio-group label,
%main-content .type-select,
%main-content .type-password,
%main-content .type-text {
  @extend %form-element;
}
%main-content .type-select > span,
%main-content .type-password > span,
%main-content label.type-text > span {
  line-height: 2.2em;
}
%app-view-content form:not(.filter-bar) [role='radiogroup'],
%modal-window [role='radiogroup'] {
  @extend %radio-group;
}
%sliding-toggle + .checkbox-group {
  margin-top: -1em;
}