@use "sass:map";
@use '../mixins';
@use '../variables';
@use "./button";

input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
input[type=file],
input[list],
textarea,
select {
  display: block;
  width: 100%;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px !important;
  border-color: rgb(var(--zn-border-color));
  background-color: rgb(var(--zn-input-bg));
  outline: none;

  &:focus {
    border-color: rgb(var(--zn-primary));
    box-shadow: 0 0 0 3px rgba(var(--zn-primary), 0.3);
  }

  &::placeholder {
    font-weight: 400;
    color: rgba(var(--zn-text), .6);
  }

  @include mixins.media-query(sm) {
    padding: mixins.spacing(sm);
  }
}

label {
  font-weight: 600;
  font-size: rgb(var(--zn-font-size-medium));
  color: rgb(var(--zn-text-heading));
  display: block;
  margin-bottom: mixins.spacing(xs);
  margin-top: mixins.spacing(md);
}

input[type=checkbox], input[type=radio] {
  border-radius: 5px;
}

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

input[type=range] {
  appearance: none;
  border-radius: 10px;
  background-color: rgb(var(--zn-border-color));
  height: mixins.spacing(sm);
  accent-color: rgb(var(--zn-primary));
  width: 100%;
  max-width: mixins.container-width(md);
}

fieldset {
  border-color: rgba(var(--zn-primary), 20%);
  border-width: 2px;
  padding: 0 mixins.spacing(md) mixins.spacing(md);
}

select {

  option {
    padding: mixins.spacing(xs);
  }

  > option:checked {
    background-color: rgba(var(--zn-primary), 20%);
    border-radius: 5px;
  }
}

fieldset > legend {
  padding: mixins.spacing(xs);
}

input[type=button],
input[type=submit],
button[type=submit]:not(.button),
button[type=button]:not(.button) {
  @include button.button;

  & {
    width: auto;
  }
}

div + button {
  margin-top: mixins.spacing(md);
}

input[type=file]::-webkit-file-upload-button {
  @include button.button;

  margin-right: mixins.spacing(sm);
}

input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: mixins.spacing(sm);
}

input[list]::-webkit-calendar-picker-indicator {
  padding: mixins.spacing(sm) mixins.spacing(xs)
}

.input--with-icon {
  position: relative;

  zn-icon {
    padding: 14px;
    position: absolute;
    top: 50%;
    pointer-events: none;
    transform: translateY(-50%);
    left: mixins.spacing(sm);
    background-color: rgb(var(--zn-primary));
    color: rgb(var(--zn-text));
    border-radius: 50%;
  }

  input {
    padding-left: 40px;
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgb(var(--zn-text));
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px #23232329;
}


select {
  height: 43px;
}

.no-border {
  border: none !important;
}