@use 'sass:color';
@use '../common/mixins';
@use '../common/variables';
@use '../utilities/text';

// —————————————————————————————————————————————————————————————————
// elements / default
// elements / select
// elements / textarea
// elements / checkbox & radio
// type / file
// error
// disabled
// optional
// dense
// icon
// —————————————————————————————————————————————————————————————————

// —————————————————————————————————————————————————————————————————
// elements / default
// —————————————————————————————————————————————————————————————————

.input {
  display: flex;
  flex-direction: column;
  text-align: left;
  position: relative;
  width: 100%;
  max-width: variables.$max-width-form;

  & + & {
    margin-block-start: 1rem;
  }

  &_label,
  &_hint,
  &_error {
    display: block;
  }

  &_hint,
  &_error {
    font-size: variables.$caption-size;
    margin-block-start: -.125rem;
    margin-block-end: .5rem;
  }

  &_label {
		@include mixins.transition(variables.$transition-md, color);
		font-weight: variables.$weight-bold;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		position: relative;
		margin-block-end: .25rem;
  }

  &_error {
    font-weight: variables.$weight-bold;
    color: variables.$error;
    border-inline-start: .25rem solid variables.$error;
    padding-inline-start: .5rem;
  }

  &_control {
		@include mixins.transition(variables.$transition-md, border-color);
    font-size: 1rem;
		font-family: variables.$font, variables.$font-fallback;
		width: 100%;
    border-radius: variables.$border-radius-sm !important;
    padding: .325rem .5rem;
		background-color: variables.$input-background;
    border: variables.$border;

		@include mixins.responsive(down, mobile) {
      background-color: variables.$input-background;
		}
    
    &:focus {
      outline: 2px solid variables.$primary;
    }
    
    &:not(textarea):not(.checkboxes):not(.radios) {
      display: inline-block;
      align-items: center;
      white-space: nowrap;
		  text-overflow: ellipsis;
      line-height: 1.2;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &:not(textarea) {
      height: variables.$input-height;
    }
  }
}

@include mixins.placeholder {
  color: variables.$text-alt;
  opacity: 1;
}

// —————————————————————————————————————————————————————————————————
// elements / select
// —————————————————————————————————————————————————————————————————

.select {

  &:after {
    content: '';
    border: solid variables.$text;
    border-width: 0 .125rem .125rem 0;
    padding: .2rem;
    transform: rotate(45deg);
    position: absolute;
    inset-block-end: variables.$input-height*.45;
    inset-inline-end: 1rem;
  }
    
  .input_control {
    display: flex;
    align-items: center;
    padding-inline-end: 2rem;
  }
}

// —————————————————————————————————————————————————————————————————
// elements / textarea
// —————————————————————————————————————————————————————————————————

textarea {
  resize: vertical;
}

// —————————————————————————————————————————————————————————————————
// elements / checkbox & radio
// —————————————————————————————————————————————————————————————————

.checkboxes,
.radios {
  display: flex;
  background-color: transparent;
  border: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
  
  &:not(&-landscape) {
    flex-direction: column;
    align-items: flex-start !important;
    height: auto !important;
    
    .checkbox + .checkbox,
    .radio + .radio {  
      margin-block-start: 0.75rem;
      margin-inline-start: 0;
    }  
  }
  
  &-landscape {
    
    .checkbox + .checkbox,
    .radio + .radio {
      margin-inline-start: 1rem;
    }
  }
}

.checkbox,
.radio {
  display: flex;
  align-items: flex-start;
}

input[type="checkbox"],
input[type='radio'] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: variables.$checkbox-width;
  width: variables.$checkbox-width;
  background-color: variables.$input-background;
  border: variables.$border;
  margin-inline-end: .5rem;
  color: variables.$primary;
}

input[type='checkbox'] {
  border-radius: variables.$border-radius-sm;

  &:after {
    content: "✔";
    font-size: 1rem;
    color: transparent;
  }
}

input[type='radio'] {
  border-radius: 50%;

  &:after {
    content: "";
    height: variables.$checkbox-width*.5;
    width: variables.$checkbox-width*.5;
    background-color: transparent;
    border-radius: 50%;
  }
}

input[type='checkbox']:checked {
  background-color: variables.$primary;

  &:after {
    color: variables.$text-contrast;
  }
}

input[type='radio']:checked {

  &:after {
    background-color: variables.$primary;
  }
}

// —————————————————————————————————————————————————————————————————
// type / file
// —————————————————————————————————————————————————————————————————

.input {

  &_control {

    &[type="file"] {
      padding-block-start: 0.4rem;
    }

    &::file-selector-button {
      font-family: variables.$font, variables.$font-fallback;
      text-transform: variables.$button-transform;
      font-weight: variables.$button-weight;
      font-size: variables.$button-sm-size;
      background-color: variables.$text-disabled;
      color: inherit;
      border: 0;
      padding: .125rem .5rem;
      border-radius: variables.$border-radius-sm;
      margin-inline-end: .5rem;
      cursor: pointer;

      &:hover,
      &:active {
        background-color: color.mix(black, variables.$text-disabled, 20%);
      }
    }
  }
}

// —————————————————————————————————————————————————————————————————
// error
// —————————————————————————————————————————————————————————————————

.input.js-error {
  
  .input {
    
    &_label { color: variables.$error; }

    &_control {
      border: 1px solid variables.$error;
      
      &.checkboxes,
      &.radios {
        border: 0;
      }
    }
  }
}

// —————————————————————————————————————————————————————————————————
// disabled
// —————————————————————————————————————————————————————————————————

.input-disabled,
.input:disabled {
  opacity: 0.5;

  .input {

    &_label,
    &_control {
      cursor: not-allowed;
    }
  }

  &.select:after {
    opacity: 0.5;
  }

  .checkbox,
  .radio {

    &_control,
    &_label {
      pointer-events: none;
    }
  }
}

.checkbox-disabled,
.radio-disabled {
  cursor: not-allowed;
  opacity: 0.5;

  > * {
    pointer-events: none;
  }
}

// —————————————————————————————————————————————————————————————————
// optional
// —————————————————————————————————————————————————————————————————

.input-optional {

  .input_label:after {
    content: " (optional)";
  }
}

// —————————————————————————————————————————————————————————————————
// dense
// —————————————————————————————————————————————————————————————————

.checkbox-dense .checkbox_label,
.radio-dense .radio_label {
  font-size: variables.$caption-size;
}

.input-dense {

  .input_label,
  .input_control,
  .checkbox,
  .radio {
    font-size: variables.$caption-size;
  }

  .input_label {
    margin-block-end: .125rem;
  }

  .input_control {
    padding: .25rem .375rem;
    
    &:not(textarea) {
      height: 2rem;
    }
  }

  .input_icon {
    height: 2rem;
    width: 2rem;
  }

  &.select {

    &:after {
      inset-block-end: 0.9rem;
      inset-inline-end: 0.625rem;
      padding: 0.15rem;
    }
 
    .input_control {
      padding-inline-end: 1.5rem;
    }
  }

  .checkboxes,
  .radios {
    padding-inline-end: 0;
    padding-inline-start: 0;

    &:not(&-landscape) {

      .checkbox + .checkbox,
      .radio + .radio {  
        margin-block-start: 0.5rem;
      }  
    }
  }

}

.checkbox-dense,
.radio-dense,
.input-dense {

  input[type="checkbox"],
  input[type='radio'] {
    height: 1.25rem;
    width: 1.25rem;
    margin-inline-end: .375rem;
  }

  input[type='checkbox']:checked {
    
    &:after {
      font-size: 0.875rem;
    }
  }
  
  input[type='radio']:checked {
    
    &:after {
      height: 0.625rem;
      width: 0.625rem;
    }
  }
}

// —————————————————————————————————————————————————————————————————
// icon
// —————————————————————————————————————————————————————————————————

.input-withIcon {

  .input_control {
    padding-inline-end: variables.$input-height*1.25;
  } 
}

// remove inline-end padding to allow native input trigger
input[type="date"],
input[type="time"],
input[type="number"] {
  appearance: initial;
  padding-inline-end: 0;
}

.input_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: variables.$input-height;
  height: variables.$input-height;
  pointer-events: none;
  border-inline-start: variables.$border;

  svg {
    width: 50%;
    height: 50%;
  }
}