label {
  display: block;
  margin-bottom: var(--margin-xs);
}

input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  background: #fff;
  border-width: 0;
  border-radius: 0;
  display: block;
  height: 4.5vw;
  font-family: var(--font-body);
  font-size: 1.2vw;
  margin-bottom: 2vw;
  padding: 0 0 0 1.5vw;
  width: 100%;

  &:focus {
    outline: 2px solid #2175f3;
  }

  &:focus::placeholder {
    color: transparent;
  }
}

@media screen and (max-width: calc(1200px - 1px)) {
  input[type="date"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="url"],
  select,
  textarea {
		font-size: 15px;
    height: 42px;
		margin-bottom: 12px;
		padding: 0 0 0 15px;
  }

  textarea {
		padding: 15px;
  }
}

textarea {
  height: 10vw;
  padding: 1.5vw;
  width: 100%;
}

select {
  appearance: none;
  color: var(--colour-blue);
  font-weight: 500;
}

.select {
  align-items: center;
  background: #fff;
  color: var(--colour-blue) !important;
  position: relative;

  select {
    cursor: pointer;
    padding-right: 3vw;
    width: auto;
  }

  i {
    height: 100%;
    line-height: 4.5vw;
    pointer-events: none;
    position: absolute;
    right: 1vw;
    top: 0;
  }
}

@media screen and (max-width: calc(1200px - 1px)) {
  .select {
    select {
      padding-right: 36px;
    }

    i {
      line-height: 42px;
      right: 12px;
    }
  }
}

.input-group {
  font-size: 1.2vw;
  margin-bottom: 2vw;

  input[type="date"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="url"],
  select {
    margin-bottom: 0;
    outline: none !important;
  }

  select:focus {
    background-color: #f7f7f7;
  }

  & > div {
    color: var(--colour-foreground-light);
    line-height: 4.5vw;
  }

  & > :not(:last-child):not(input:has(+ div)) {
    border-right-color: var(--colour-background-alt);
    border-right-style: solid;
    border-right-width: 1px;
  }

  &:has(> input[type="date"]:focus),
  &:has(> input[type="email"]:focus),
  &:has(> input[type="number"]:focus),
  &:has(> input[type="password"]:focus),
  &:has(> input[type="search"]:focus),
  &:has(> input[type="tel"]:focus),
  &:has(> input[type="text"]:focus),
  &:has(> input[type="url"]:focus),
  &:has(> .select select:focus) {
    outline: 2px solid #2175f3;
  }
}

@media screen and (max-width: calc(1200px - 1px)) {
  .input-group {
    font-size: 15px;
    margin-bottom: 12px;

    & > div {
      line-height: 42px;
    }
  }
}

.input-group {
  background: #fff;
  display: flex;
}

input,
.input-group {
  &:has(+ .input-help),
  &:has(+ .input-validation) {
    margin-bottom: var(--margin-xs) !important;
  }
}

input,
.input-group {
  &:has(+ .input-validation) {
    outline: 2px solid var(--colour-red);
  }
}

label:has(> input[type="checkbox"]) {
  align-items: first baseline;
  display: flex;
}

label > input[type="checkbox"] {
  margin-right: var(--margin-xs);
}

.input-help,
.input-validation {
  margin-bottom: var(--margin-md);

  i {
    margin-right: var(--margin-xxs);
  }
}

.input-help {
  color: var(--colour-foreground-light);
  font-size: 85%;
}

.input-validation:has(+ .input-help) {
  margin-bottom: var(--margin-xs);
}

.input-validation {
  color: var(--colour-red);
  font-weight: 600;
  font-size: 85%;
}