//  .d888
//  d88P"
//  888
//  888888 .d88b.  888d888 88888b.d88b.  .d8888b
//  888   d88''88b 888P"   888 "888 "88b 88K
//  888   888  888 888     888  888  888 "Y8888b.
//  888   Y88..88P 888     888  888  888      X88
//  888    "Y88P"  888     888  888  888  88888P'

// Forms
//
// Coming soon...
//
// Styleguide Components.Forms
input,
select {
  border: $border-base;
  height: $line-height-form;
  padding: $space-s;

  .on-dark & {
    color: color(black);
  }
}

input[type='number']:invalid {
  @include state-error;
}

label {
  cursor: pointer;
}

select {
  &[multiple] {
    height: $space-xxxxl;
    padding: 0;
    width: 100%;

    &.boxed {
      height: 40rem;
    }

    option {
      padding: $space-xs $space-m;
    }
  }
}

dw-simple-select {
  .select-child-field {
    margin-top: 0;
  }

  + dw-simple-select .select-child-field {
    margin-top: $space-m;

    @include breakpoint(l) {
      margin-top: 0;
    }
  }
}

.checkbox {
  input ~ .control-indicator::before {
    background-position: $form-control-checkbox-position;
  }

  input:checked ~ .control-indicator::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iI2ZkYjcxYyIgZD0iTTE2LjU4IDEuMzlhLjY4LjY4IDAgMCAwLS40NC4yMUw2LjggMTEuMzJsLTIuODktM2EuNzYuNzYgMCAwIDAtMSAwTC4xOSAxMS4xMWEuNzUuNzUgMCAwIDAgMCAxbDMuNDEgMy41NCAyLjY0IDIuNzZhLjc2Ljc2IDAgMCAwIDEgMGwyLjI1LTIuMzEuNDctLjQ5IDkuODUtMTAuMjdhLjc1Ljc1IDAgMCAwIDAtMUwxNy4xNiAxLjZhLjc0Ljc0IDAgMCAwLS41OC0uMjF6Ii8+PC9zdmc+');
  }

  input:not(:checked) ~ .control-indicator::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iI2U2ZTdlOCIgZD0iTTE2LjU4IDEuMzlhLjY4LjY4IDAgMCAwLS40NC4yMUw2LjggMTEuMzJsLTIuODktM2EuNzYuNzYgMCAwIDAtMSAwTC4xOSAxMS4xMWEuNzUuNzUgMCAwIDAgMCAxbDMuNDEgMy41NCAyLjY0IDIuNzZhLjc2Ljc2IDAgMCAwIDEgMGwyLjI1LTIuMzEuNDctLjQ5IDkuODUtMTAuMjdhLjc1Ljc1IDAgMCAwIDAtMUwxNy4xNiAxLjZhLjc0Ljc0IDAgMCAwLS41OC0uMjF6Ii8+PC9zdmc+');
  }

  &.bustout {
    input ~ .control-indicator::before {
      background-position: $form-control-checkbox-bust-position;
      background-size: $form-control-checkbox-bust-size-inner;
      height: $form-control-checkbox-bust-size;
      left: $form-control-checkbox-bust-left;
      margin-top: $form-control-checkbox-bust-margin-top;
      top: $form-control-checkbox-bust-top;
      width: $form-control-checkbox-bust-size;
    }
  }
}

.control {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  line-height: $line-height-form;
  height: auto;
  padding: 0;
  position: relative;
  width: 100%;

  input {
    opacity: 0;
    width: auto;
    z-index: -1;

    &:focus ~ .control-indicator {
      box-shadow: $shadows-box-focus;
    }
  }
}

.control-indicator {
  background-color: color(white);
  border: 2px solid color(black);
  border-radius: $border-radius-circle;
  display: block;
  flex-shrink: 0;
  height: $form-control-default-size;
  left: 0;
  position: relative;
  top: 0;
  user-select: none;
  width: $form-control-default-size;

  .on-dark & {
    border-color: color(white);
  }

  &::before {
    background-position: center;
    background-repeat: no-repeat;
    background-size: $form-control-default-size-inner;
    border-radius: $border-radius-base;
    content: '';
    height: $form-control-default-size;
    left: $form-control-default-left;
    position: absolute;
    top: $form-control-default-top;
    width: $form-control-default-size;
  }
}

.control-label {
  line-height: $line-height-header;
  padding-left: $space-s;
}

.controls-boxed {
  border: $border-base;
  max-height: 400px;
  overflow-y: scroll;

  label {
    font-weight: $font-weight-normal;
    line-height: 1;
    margin: 0 !important;
    text-transform: none;

    &:nth-child(even) {
      background-color: color(grey, 95);
    }
  }
}

.controls-inline {
  margin: $space-m 0;

  .control {
    display: inline-block;
    height: $space-m;

    + .control {
      margin-left: $space-m;
    }
  }
}

.file {
  cursor: pointer;
  display: inline-block;
  height: $line-height-form;
  position: relative;
  width: 100%;

  input {
    filter: alpha(opacity=0);
    margin: 0;
    min-width: $space-xxl;
    opacity: 0;
  }

  input:focus ~ .file-custom {
    outline: $shadows-box-focus;
  }
}

.file-custom {
  background-color: color(white);
  border: $border-base;
  border-radius: $border-radius-base;
  color: color(black);
  height: $line-height-form;
  left: 0;
  line-height: $line-height-form;
  padding: 0 $space-m;
  position: absolute;
  right: 0;
  top: 0;
  user-select: none;
  z-index: 5;

  &::after {
    content: 'Choose file...';
  }

  &:before {
    background-color: color(grey, 95);
    border: $border-base;
    border-radius: $border-radius-base;
    color: color(black);
    content: 'Browse';
    display: block;
    height: $line-height-form;
    line-height: $line-height-form;
    padding: 0 $space-m;
    position: absolute;
    right: -1px;
    top: -1px;
    z-index: 6;
  }
}

.floating-label-group {
  margin: $space-s 0;
  padding-top: $space-m;
  position: relative;

  .login-form & {
    @include breakpoint(m) {
      margin: 0;
    }
  }

  input {
    position: relative;
    width: 100%;
    z-index: 2;

    &:not(:placeholder-shown) + label {
      opacity: 1;
      top: 0;
    }

    .search-actions & {
      background-color: transparent;
      height: $space-l;
    }
  }

  label {
    font-size: $font-size-s;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 50%;
    transition: $transition-base;
    z-index: 1;

    + .field-error-display > .state-error {
      border-top-width: 0;
    }
  }
}

.floating-label-select {
  padding-top: 0;

  label {
    opacity: 1;
    position: relative;
    top: 0;
  }
}

.form-control-inline {
  display: block;

  @include breakpoint(s) {
    align-items: center;
    display: flex;
  }

  input {
    min-width: $space-s;
  }

  label {
    margin: 0 $space-s 0 0;
    white-space: nowrap;
  }

  .toggle-switch label {
    margin-right: 0;
  }
}

.form-group {
  &.alt-off + .form-group.alt-off {
    margin-top: $space-m;
    padding-top: $space-m;
  }

  .control input {
    width: auto;
  }

  input {
    width: 100%;

    + .field-error-display > .state-error {
      border-top-width: 0;
    }
  }

  label {
    display: block;
    font-weight: $font-weight-bold;
    margin-bottom: $space-xs;
    text-transform: uppercase;

    &.control {
      display: flex;
    }

    &.label-parent {
      line-height: $line-height-header;
      margin-bottom: $space-m;
    }
  }

  .control-label {
    font-weight: $font-weight-normal;
    text-transform: none;
  }
}

.form-groups {
  margin-bottom: $space-m;

  > * {
    > .form-group {
      padding: $space-m;
    }

    + * > .form-group {
      padding-top: 0;
    }
  }
}

.form-read-more {
  &:active,
  &:focus,
  &:hover {
    dw-icon {
      use {
        fill: $color-theme-base-text;
      }

      path {
        all: inherit;
      }
    }
  }

  dw-icon {
    flex-shrink: 0;
    height: $icon-size-l;
    margin-right: $space-s;
    width: $icon-size-l;

    @include breakpoint(l) {
      height: $icon-size-xl;
      width: $icon-size-xl;
    }

    use {
      fill: $color-theme-base-accent;
    }

    path {
      all: inherit;
    }
  }

  span {
    font-size: $font-size-xs;
  }
}

.form-settings {
  background-color: $color-theme-dark-background;
  display: grid;
  grid-template-columns: min-content auto;
  padding: 0;

  @include breakpoint(l) {
    margin-left: $space-l;
  }

  > div {
    padding: $space-s;
  }

  > i {
    align-items: center;
    background-color: $color-theme-dark-background-alt;
    color: color(white);
    display: flex;
    justify-content: center;
    padding: $space-s;
  }

  label {
    margin: (-$space-xs) 0 $space-xs;
  }

  .select {
    select {
      border-width: 0;
    }
  }
}

.form-settings-header,
.form-settings-header:first-child {
  .on-dark & {
    background-color: color(white);
    color: color(grey, 20);
    display: inline-block;
    font-size: $font-size-s;
    font-weight: $font-weight-bold;
    margin: (-$space-xs) $space-xs $space-s (-$space-xs);
    padding: $space-xs $space-s;
    text-transform: uppercase;
  }
}

.input-icon {
  border: $border-base;
  display: flex;
  overflow-x: hidden;
  width: 100%;

  > i {
    align-items: center;
    background-color: color(grey, 90);
    color: color(black);
    display: flex;
    fill: currentColor;
    flex: 0 0 $line-height-form;
    height: $line-height-form;
    justify-content: center;
    width: $line-height-form;
  }

  &[class*='state-'] > i {
    color: color(white);
  }

  &.state-error > i {
    background-color: $color-state-error-border;
  }

  &.state-info > i {
    background-color: $color-state-info-border;
  }

  &.state-success > i {
    background-color: $color-state-success-border;
  }

  &.state-warning > i {
    background-color: $color-state-warning-border;
  }

  input {
    border-width: 0;
    flex: 1 1 100%;
  }

  + .field-error-display {
    > [class*='state-'] {
      border-top-width: 0 !important;
    }
  }
}

.input-with-button {
  border: $border-base;
  display: flex;

  input {
    border-width: 0;
    flex: 1 1 100%;
  }

  button {
    border-width: 0;
    white-space: nowrap;
  }
}

.label-parent {
  color: $color-theme-dark-background-alt;
  font-size: $font-size-m;
  font-weight: $font-weight-bold;
  margin-top: 0;

  &:not(:first-child) {
    margin-top: $space-m;
  }

  @at-root .form-group label#{&} {
    text-transform: none;
  }
}

.label-parent-choose {
  color: $color-theme-base-text;

  a {
    color: $color-theme-base-link;

    &:active,
    &:focus,
    &:hover {
      background-color: $color-theme-base-hover-background;
      color: $color-theme-base-hover-text;
    }
  }
}

.label-plain {
  font-size: $font-size-s;

  @at-root .form-group label#{&} {
    font-weight: $font-weight-normal;
    text-transform: none;
  }
}

.progress {
  display: inline-block;
  height: $space-m;
  width: 100%;

  &[value] {
    appearance: none;
    border: 0;
    color: $color-theme-dark-background-alt;

    &::-webkit-progress-bar {
      background-color: color(grey, 95);
      border-radius: $border-radius-base;
    }

    &::-webkit-progress-value {
      background-color: $color-theme-dark-background-alt;
      border-bottom-left-radius: $border-radius-base;
      border-top-left-radius: $border-radius-base;
    }
  }

  &[value='100']::-webkit-progress-value {
    border-bottom-right-radius: $border-radius-base;
    border-top-right-radius: $border-radius-base;
  }
}

.radio {
  input ~ .control-indicator::before {
    background-position: $form-control-checkbox-position;
  }

  input:checked ~ .control-indicator::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iI2ZkYjcxYyIgZD0iTTE2LjU4IDEuMzlhLjY4LjY4IDAgMCAwLS40NC4yMUw2LjggMTEuMzJsLTIuODktM2EuNzYuNzYgMCAwIDAtMSAwTC4xOSAxMS4xMWEuNzUuNzUgMCAwIDAgMCAxbDMuNDEgMy41NCAyLjY0IDIuNzZhLjc2Ljc2IDAgMCAwIDEgMGwyLjI1LTIuMzEuNDctLjQ5IDkuODUtMTAuMjdhLjc1Ljc1IDAgMCAwIDAtMUwxNy4xNiAxLjZhLjc0Ljc0IDAgMCAwLS41OC0uMjF6Ii8+PC9zdmc+');
  }

  input:not(:checked) ~ .control-indicator::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iI2U2ZTdlOCIgZD0iTTE2LjU4IDEuMzlhLjY4LjY4IDAgMCAwLS40NC4yMUw2LjggMTEuMzJsLTIuODktM2EuNzYuNzYgMCAwIDAtMSAwTC4xOSAxMS4xMWEuNzUuNzUgMCAwIDAgMCAxbDMuNDEgMy41NCAyLjY0IDIuNzZhLjc2Ljc2IDAgMCAwIDEgMGwyLjI1LTIuMzEuNDctLjQ5IDkuODUtMTAuMjdhLjc1Ljc1IDAgMCAwIDAtMUwxNy4xNiAxLjZhLjc0Ljc0IDAgMCAwLS41OC0uMjF6Ii8+PC9zdmc+');
  }
}

.read-more-content {
  background-color: $color-state-info-background;
  padding: $space-m;

  h4 {
    font-weight: $font-weight-bold;
    margin-top: 0;
  }

  .on-dark & {
    color: $color-theme-base-text;

    h4 {
      color: $color-theme-base-text;
    }
  }
}

.search-options {
  .control.checkbox {
    background-color: color(grey, 98);
    border: 1px solid color(grey, 80);
    margin-bottom: 0;
    padding: $space-xs 0;
  }
}

.select {
  color: color(black);
  display: flex;
  position: relative;
  width: 100%;

  &.search-settings {
    select {
      background-color: color(white, 100, 80);
    }
  }

  &.select-icon-left {
    background-color: color(white);

    select {
      background-color: transparent;
      border: $border-base;
      padding-left: $space-xxl;
      position: relative;
      z-index: 2;
    }
  }

  &.select-multiple {
    &::after {
      display: none;
    }

    option[disabled] {
      background-color: $color-theme-dark-background;
      color: color(white);
      cursor: default;
      font-weight: $font-weight-bold;
      padding: $space-s $space-m;
    }
  }

  i {
    align-items: center;
    background-color: color(grey, 95);
    border-width: 0;
    display: flex;
    flex-direction: row;
    height: $line-height-form;
    justify-content: center;
    position: absolute;
    width: $line-height-form;
    z-index: 1;
  }

  select {
    appearance: none;
    background-color: color(white);
    border-radius: $border-radius-base;
    border: $border-base;
    color: color(black);
    cursor: pointer;
    display: inline-block;
    line-height: $line-height-base;
    margin: 0;
    outline: 0;
    padding: $space-s ($space-l + $space-s) $space-s $space-m;
    width: 100%;

    &[multiple] {
      padding: 0;

      &.select-icon-left {
        padding-left: 6rem;
      }
    }

    &:focus {
      option:checked {
        background: $color-theme-dark-background-alt
          linear-gradient(
            0deg,
            $color-theme-dark-background-alt 0%,
            $color-theme-dark-background-alt 100%
          );
        color: color(white) !important;
      }
    }

    &:focus:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 color(black);
    }

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

    option:checked {
      background: color(cyan, 70) linear-gradient(0deg, color(cyan, 70) 0%, color(cyan, 70) 100%);
      color: color(black) !important;
    }
  }

  &::after {
    border-bottom: $space-xs solid transparent;
    border-left: $space-xs solid transparent;
    border-right: $space-xs solid transparent;
    border-top: $space-s solid;
    content: '';
    display: inline-block;
    height: 0;
    margin-top: (-$space-xs);
    pointer-events: none;
    position: absolute;
    right: $space-m;
    top: 50%;
    width: 0;
  }
}

.select-alt {
  display: flex;

  label {
    background-color: color(grey, 20);
    color: color(white);
    line-height: $line-height-form;
    padding: 0 $space-m;
    text-transform: uppercase;
  }
}

.select-child-arrow.g-l-1 {
  display: none;

  @include breakpoint(l) {
    .grid & {
      display: flex;
      grid-row-start: 1;
      grid-row-end: 99;
      justify-content: flex-end;
    }
  }

  b {
    border-bottom: $border-base;
    border-left: $border-base;
    display: block;
    height: 50%;
    width: 50%;

    .hide-child-design & {
      display: none;
    }
  }
}

.select-child-header {
  align-self: start;
  margin-top: $space-m;

  @include breakpoint(l) {
    margin-top: ($space-m + $space-s);
    min-height: $line-height-form;
  }

  .hide-child-design & {
    margin-top: 0;
  }
}

.select-read-more {
  align-items: center;
  display: flex;
  flex-direction: row;
  margin-top: $space-s;

  @include breakpoint(l) {
    margin-top: ($space-m + $space-s);
    min-height: $line-height-form;
  }

  &.checkbox-read-more {
    @include breakpoint(l) {
      margin-top: $space-xs;
    }
  }

  a {
    align-items: center;
    background-image: none;
    display: flex;

    &:active,
    &:focus,
    &:hover {
      em,
      i {
        color: $color-theme-base-hover-text;
      }
    }
  }

  em {
    color: $color-theme-base-link;
    font-style: normal;
    font-weight: $font-weight-bold;
    text-transform: uppercase;

    @include breakpoint(l) {
      display: block;
    }
  }

  hr {
    display: none;

    @include breakpoint(l) {
      border-top: 1px dashed $color-theme-base-accent;
      display: block;
      flex-shrink: 0;
      margin: 0;
      width: $space-xl;
    }
  }

  i {
    color: $color-theme-base-accent;
    height: 100%;
    margin-right: $space-s;

    > * {
      align-items: center;
      display: flex;
      flex-direction: row;
      height: 100%;
      width: 100%;
    }

    @include breakpoint(l) {
      svg {
        height: $space-l;
        width: $space-l;
      }
    }
  }
}

.toggle-switch {
  align-items: center;
  border: $border-base;
  border-radius: $space-xs;
  display: flex;
  width: 100%;

  .on-dark & {
    color: color(black);
  }

  input {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    max-width: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;

    &:focus ~ label {
      box-shadow: $shadows-box-focus;
    }

    &:checked + label {
      background-color: $color-theme-base-accent;
      color: color(white);
    }
  }

  label {
    background-color: $color-state-info-background-alt;
    border-right: $border-base;
    flex-grow: 1;
    font-weight: $font-weight-normal;
    margin-bottom: 0;
    padding: $space-s $space-m;
    text-align: center;
    text-transform: none;

    &:first-of-type {
      border-bottom-left-radius: $space-xs;
      border-top-left-radius: $space-xs;
    }

    &:last-of-type {
      border-bottom-right-radius: $space-xs;
      border-right-width: 0;
      border-top-right-radius: $space-xs;
    }

    &:active,
    &:focus,
    &:hover {
      background-color: $color-theme-dark-background-alt;
      color: color(white);
    }
  }
}