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

// Variables
$border-radius: 3px;
$border-width: 2px;
$button-font-weight: 700;
$background-inputs: $color-white;
$color-checkboxes: $color-main;

// CSS Variables for radios and checkboxes
:root {
  --checkbox-radio-size: 16px;
  --checkbox-radio-gap: 10px;
  --checkbox-radio-border-width: 2px;
  --checkbox-radio-line-height: var(--body-line-height);
  --radio-marker-size: 8px;
  --checkbox-marker-size: 12px;
  --checkbox-radius: 4px;
}

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

// Buttons
.content-area,
.site-footer {
  button,
  .button,
  input[type="reset"],
  input[type="submit"],
  input[type="button"] {
    font-size: var(--font-size-small);
    background: $color-darkgrey;
    color: $color-white;
    border: 0;
    border-radius: $border-radius;
    width: auto;
    display: inline-block;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 0;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    transition: 150ms linear background;
    font-family: $font-paragraphs;
    font-weight: $button-font-weight;
    line-height: 1;
    appearance: none;

    // Button styles
    &.button-ghost {
      background-color: transparent;
      border: $border-width solid $color-buttons;
      color: $color-buttons;
    }

    // Button sizes
    &.button-small {
      font-size: var(--font-size-small);
      padding-top: 12px;
      padding-bottom: 12px;
      padding-left: 25px;
      padding-right: 25px;
    }

    &.button-medium {
      font-size: var(--font-size-medium);
      padding-top: 15px;
      padding-bottom: 15px;
      padding-left: 20px;
      padding-right: 20px;
    }

    &.button-large {
      font-size: var(--font-size-extra-large);
      padding: 21px 35px;
    }

    &:hover,
    &:focus {
      color: $color-white;
      background: $color-buttons-hover;
      border-color: $color-buttons-hover;
    }
  }
}

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

  &::-ms-expand {
    display: none;
  }
}

// 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;
  border-radius: 3px;
  font-family: $font-paragraphs;
  background: $background-inputs;
  border: solid $border-width $color-border-forms;
  padding: 15px;
  line-height: 24px;
  transition: background .55s;
  text-decoration: none;
  position: relative;
  appearance: none;
  margin-bottom: 0;
  box-sizing: border-box;
  font-size: var(--font-size-medium);

  &::placeholder {
    color: $color-paragraphs;
    opacity: .4;
  }

  &:focus {
    background: $background-inputs;
    border: $border-width solid darken(#d9d9d9, 12%);
    outline: 0;

    &::placeholder {
      color: $color-black;
      opacity: .8;
    }
  }
}

select:focus {
  background: $background-inputs;
  border: $border-width solid darken(#d9d9d9, 12%);
}

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

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

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

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

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

// Radio button and checkbox checked states
input[type="radio"]:checked + label::before,
input[type="checkbox"]:checked + label::before {
  background-color: $color-checkboxes;
  box-shadow: none;
  border-color: $color-checkboxes;
  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(--radio-marker-size);
}

// 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(--checkbox-marker-size);
}

// 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: $color-checkboxes;
  box-shadow: 0 0 0 3px rgba($color-checkboxes, .2);
}

// 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 sh-waqar/declaration-use-variable, 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: lighten($color-checkboxes, 15%);
}
/* stylelint-enable sh-waqar/declaration-use-variable, selector-max-pseudo-class */