// Forms and input fields
//
// All the forms on the site. General styles. Supports most of
// the Gravity Forms styles out of the box.

// CSS Variables for radios and checkboxes
:root {
  // Form element colors
  --color-background-input-field: var(--color-white);
  --color-border-forms: #d9d9d9;
  --color-border-forms-focus: rgba(42, 45, 62, .3);
  --color-button: var(--color-white);
  --color-button-hover: var(--color-white);
  --color-button-background: var(--color-east-bay);
  --color-button-background-hover: var(--color-valhalla);
  --color-checkbox: var(--color-east-bay);
  --color-checkbox-outline: 0 0 0 3px rgba(84, 87, 115, .2);
  --color-checkbox-border-hover: lighten(#545773, 15%);
  --color-placeholder: var(--color-paragraph);
  --color-placeholder-focus: var(--color-black);
  --opacity-placeholder: .4;
  --opacity-placeholder-focus: .8;

  // Form element settings
  --border-radius-checkbox: 4px;
  --border-radius-input-field: 4px;
  --border-radius-select: 0;
  --border-width-checkbox: 2px;
  --border-width-input-field: 2px;
  --gap-checkbox: 10px;
  --line-height-checkbox: var(--line-height-paragraphs);
  --size-checkbox-marker: 12px;
  --size-radio-button: 16px;
  --size-radio-button-marker: 8px;
}

// Buttons
.button-wrapper {
  margin-bottom: 0;
}

// Buttons
.site-main,
.site-footer {
  button,
  .button,
  input[type="reset"],
  input[type="submit"],
  input[type="button"] {
    @include button();

    // Button sizes
    &.button-small {
      @include button-size-small();
    }

    &.button-large {
      @include button-size-large();
    }

    // Button styles
    &.button-ghost {
      @include button-style-ghost();
    }
  }
}

// Select drop downs
select {
  background-image: url('../../svg/select.svg');
  background-position: right 0 center;
  background-repeat: no-repeat;
  background-size: 40px auto;
  border-color: var(--color-border-forms);
  border-radius: var(--border-radius-select);
  border-style: solid;
  border-width: var(--border-width-input-field);
  color: var(--color-paragraph);
  font-size: var(--font-size-17);
  line-height: 24px;
  max-width: 100%;
  min-width: 0;
  padding: 15px;
  text-indent: 1px;
  transition: none;
  width: 100%;
}

// Form input elements and textareas
textarea,
select,
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="search"] {
  @extend %default;
  background-color: var(--color-background-input-field);
  border-color: var(--color-border-forms);
  border-radius: var(--border-radius-input-field);
  border-style: solid;
  border-width: var(--border-width-input-field);
  box-sizing: border-box;
  font-family: var(--font-paragraph);
  font-size: var(--font-size-17);
  line-height: 24px;
  margin-bottom: 0;
  padding: 15px;
  position: relative;
  text-decoration: none;
  transition: background .55s;

  &::placeholder {
    color: var(--color-placeholder);
    opacity: var(--opacity-placeholder);
  }

  &:focus {
    background-color: var(--color-background-input-field);
    border-color: var(--color-border-forms-focus);

    &::placeholder {
      color: var(--color-placeholder-focus);
      opacity: var(--opacity-placeholder-focus);
    }
  }
}

// Radio buttons and checkboxes
input[type="radio"],
input[type="checkbox"] {
  height: var(--size-radio-button);
  margin: 0;
  margin-top: calc((1em * var(--line-height-checkbox) - var(--size-radio-button)) / 2);
  opacity: 0;
  padding: 0;
  pointer-events: none;
  // Hide native buttons
  position: absolute;
  width: var(--size-radio-button);
}

// Labels for radio buttons and checkboxes
input[type="radio"] + label,
input[type="checkbox"] + label {
  align-items: flex-start;
  cursor: pointer;
  display: inline-flex;
  line-height: var(--line-height-checkbox);
}

// Custom buttons - basic style
input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
  align-self: center;
  background-color: var(--color-white);
  background-position: center;
  background-repeat: no-repeat;
  border-color: var(--color-checkbox);
  border-style: solid;
  border-width: var(--border-width-checkbox);
  content: '';
  display: inline-flex;
  flex-shrink: 0;
  height: var(--size-radio-button);
  margin-right: var(--gap-checkbox);
  position: relative;
  top: calc(var(--border-width-checkbox) / 2);
  transition: transform .2s, border .2s;
  width: var(--size-radio-button);
}

// Radio only style
input[type="radio"] + label::before {
  border-radius: 50%;
}

// Checkbox only style
input[type="checkbox"] + label::before {
  border-radius: var(--border-radius-checkbox);
}

// Radio button and checkbox checked states
input[type="radio"]:checked + label::before,
input[type="checkbox"]:checked + label::before {
  background-color: var(--color-checkbox);
  border-color: var(--color-checkbox);
  box-shadow: none;
  transition: transform .2s;
}

// Radio button and checkbox active states
input[type="radio"]:active + label::before,
input[type="checkbox"]:active + label::before {
  transform: scale(.8);
  transition: transform .2s;
}

// Radio button icon
input[type="radio"]:checked + label::before {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
  background-size: var(--size-radio-button-marker);
}

// Checkbox button icon
input[type="checkbox"]:checked + label::before {
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-size: var(--size-checkbox-marker);
}

// Radio button and checkbox focus states
input[type="radio"]:focus + label::before,
input[type="checkbox"]:focus + label::before,
input[type="radio"]:checked:active + label::before,
input[type="checkbox"]:checked:active + label::before {
  border-color: var(--color-checkbox);
  box-shadow: var(--color-checkbox-outline);
}

// Radio button and checkbox checked + active states
input[type="radio"]:checked:active + label::before,
input[type="checkbox"]:checked:active + label::before {
  transform: none;
  transition: none;
}

// Radio button and checkbox hovers
/* stylelint-disable selector-max-pseudo-class */
input[type="radio"]:not(:checked):not(:focus) + label:hover::before,
input[type="checkbox"]:not(:checked):not(:focus) + label:hover::before {
  border-color: var(--color-checkbox-border-hover);
}
/* stylelint-enable selector-max-pseudo-class */