@import '../../../02-sass-tools/sass-mq';
@import '../../../02-sass-tools/fonts';
@import '../../../02-sass-tools/input';

%customInputStyles {
  font-family: inherit;
  border-radius: $form-border-radius;
  border: 1px solid $black-60;
  color: $black-100;
  width: 100%;
  line-height: 1.5;
  transition: all $transition-time ease-in;
  outline: none;
  cursor: pointer;

  &.error {
    border-color: $color-error;
    background-color: $color-error-message;
  }

  &.success {
    border-color: $color-success;
    background-color: $color-success-message;
  }

  &.info {
    border-color: $color-info;
    background-color: $color-info-message;
  }

  &:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  &:hover:enabled {
    border-color: $black-100;
  }

  &.error:hover:enabled {
    border-color: $color-error-hover;
  }

  &.success:hover:enabled {
    border-color: $color-success-hover;
  }

  &.info:hover:enabled {
    border-color: $color-info-hover;
  }

  &:focus,
  &:focus:enabled {
    box-shadow: inset 0 0 0 1px $black-100;
    border-color: $black-100;
  }

  &:invalid {
    box-shadow: none;
  }

  &::-webkit-input-placeholder {
    color: $black-60;
  }

  // CHECK: color correct?
  &:-moz-placeholder {
    color: $black-60;
  }

  &::-moz-placeholder {
    color: $black-60;
  }

  &:-ms-input-placeholder {
    color: $black-60;
  }

  &:focus::-webkit-input-placeholder {
    color: transparent;
  }

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

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

  &:focus:-ms-input-placeholder {
    color: transparent;
  }
}

input[type='text'],
input[type='tel'],
input[type='number'],
input[type='email'],
textarea {
  &.sc-input {
    @include input();
    @extend %customInputStyles;
    cursor: auto;
  }
}

select.sc-input {
  @include input();
  @extend %customInputStyles;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:%23333333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st1%7Bfill:none;stroke:%23333333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st2%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23333333;%7D .st3%7Bfill:%23333333;%7D .st4%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23333333;stroke:%23333333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st5%7Bfill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:%23C6C6C6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st6%7Bfill:none;stroke:%23C6C6C6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st7%7Bfill:none;stroke:%23333333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;%7D .st8%7Bfill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:%2395C11F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st9%7Bfill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:%23E30613;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cpath class='st3' d='M12,18c-0.3,0-0.5-0.1-0.7-0.3l-8-8c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l7.3,7.3l7.3-7.3c0.4-0.4,1-0.4,1.4,0 s0.4,1,0,1.4l-8,8C12.5,17.9,12.3,18,12,18z'/%3E%3C/svg%3E"); /* stylelint-disable-line string-quotes */
  background-repeat: no-repeat;
  background-size: 18px;

  background-position: -100px -100px;
  background-color: $white;

  // Hiding arrows in webkit and firefox based browsers
  background-position: 99% center; // fallback for older devices
  background-position: right 12px center;
  -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
  -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
  appearance: none;

  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
  }
}

textarea.sc-input {
  height: auto !important;
}

custom-dropdown {
  &.sc-input {
    height: 40px;
    @extend %customInputStyles;
  }
}

// TODO: check that original radio box is hidden on all devices and in all browsers
input[type='radio'],
input[type='checkbox'] {
  &.sc-input {
    display: block;
    opacity: 0;
    position: absolute;

    &.block + label {
      display: block;
    }

    & + label {
      user-select: none;
      -webkit-touch-callout: none;
      line-height: 1.5rem;
      display: inline-block;
      position: relative;
      margin-right: 16px;
      cursor: pointer;
      padding-left: 32px;
      font-size: 16px;

      &::before {
        content: '';
        display: block;
        background-size: cover;
        position: absolute;
        left: 0;
        height: 26px;
        width: 26px;
        top: 0;
        border: 1px solid $black-60;
        transition: border-color $transition-time ease-in;
      }

      &::after {
        transition: border-color $transition-time ease-in;
      }
    }

    &:disabled + label::before {
      opacity: 0.55;
    }

    &:disabled + label {
      cursor: not-allowed;
      color: $black-40;
    }

    &:enabled + label:hover::before {
      border-color: $black-100;
    }

    &:focus:enabled + label::before {
      border: 1px solid $black-100;
      box-shadow: inset 0 0 0 1px $black-100;
    }
  }
}

input[type='radio'] {
  &.sc-input {
    & + label {
      &:before {
        border-radius: 25px;
      }
    }

    &:checked + label:before {
      background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2026%22%20enable-background%3D%22new%200%200%2026%2026%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23333%3B%7D%3C%2Fstyle%3E%3Ccircle%20cy%3D%2213%22%20cx%3D%2213%22%20r%3D%225%22%20class%3D%22st0%22%2F%3E%3C%2Fsvg%3E');
      background-repeat: no-repeat;
    }
  }
}

input[type='checkbox'] {
  &.sc-input {
    padding: 8px 8px 8px 0;

    & + label {
      &:before {
        border-radius: $form-border-radius;
      }
    }

    &:checked + label:before {
      background: no-repeat center/75%
        url("data:image/svg+xml,%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:%23333333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st1%7Bfill:none;stroke:%23333333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st2%7Bfill:%23333333;%7D .st3%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23333333;%7D .st4%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23333333;stroke:%23333333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st5%7Bfill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:%23C6C6C6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st6%7Bfill:none;stroke:%23C6C6C6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st7%7Bfill:none;stroke:%23333333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;%7D .st8%7Bfill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:%2395C11F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st9%7Bfill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:%23E30613;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cpath class='st2' d='M9,19c-0.3,0-0.5-0.1-0.7-0.3l-5-5c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L9,16.6L19.3,6.3c0.4-0.4,1-0.4,1.4,0 s0.4,1,0,1.4l-11,11C9.5,18.9,9.3,19,9,19z'/%3E%3C/svg%3E%0A");
    }
  }
}

.sc-toggle-checkbox {
  display: inline-block;
  opacity: 0;
  position: absolute;
  + label.sc-toggle {
    background: $black-60;
    as24-icon {
      opacity: 0;
      transition: all 250ms ease-in 200ms;
    }
  }

  &:hover {
    + label.sc-toggle {
      background-color: $google-blue-90;
    }
  }

  &:focus:enabled + label.sc-toggle {
    box-shadow: inset 0 0 0 2px $google-blue;
  }

  &:active {
    + label.sc-toggle {
      background-color: $google-blue-90;
    }
  }

  &:disabled + label.sc-toggle {
    background-color: $google-blue-50;
    cursor: not-allowed;
  }

  &:checked {
    + label.sc-toggle {
      background: $color-link;
      as24-icon {
        opacity: 1;
      }

      .sc-toggle-background {
        transform: translate(25px, 0);
      }
    }

    &:hover {
      + label.sc-toggle {
        background-color: $google-blue-90;
        as24-icon svg {
          fill: $google-blue-90;
          stroke: $google-blue-90;
          transition: all 100ms ease-in 100ms;
        }
      }
    }

    &:active {
      + label.sc-toggle {
        background-color: $google-blue-90;
      }
    }

    &:focus {
      + label.sc-toggle {
        box-shadow: inset 0 0 0 2px $google-blue;
      }
    }

    &:disabled {
      + label.sc-toggle {
        background-color: $google-blue-50;
        as24-icon svg {
          fill: $google-blue-50;
          stroke: $google-blue-50;
        }
      }
    }
  }

  &.loading {
    + label.sc-toggle {
      .sc-toggle-background {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        as24-icon {
          opacity: 0;
        }

        &::before {
          position: absolute;
          content: '';
          border-radius: 50%;
          display: block;
          height: 15px;
          width: 15px;
          border: 2px solid $blue-30;
          border-right-color: $color-link;
          transform-origin: center center;
          animation: loop 1.4s linear infinite;
        }

        @keyframes loop {
          100% {
            transform: rotate(360deg);
          }
        }
      }
    }
  }
}

.sc-toggle {
  transition: all 300ms;
  display: inline-block;
  height: 23px;
  width: 48px;
  background-color: $black-60;
  border-radius: 11.5px;

  &:hover {
    cursor: pointer;
  }

  &:focus {
    box-shadow: inset 0 0 0 2px $google-blue;
  }

  as24-icon {
    height: 19px;
    width: 19px;
    opacity: 0;

    svg {
      fill: $google-blue;
      stroke: $google-blue;
      stroke-width: 2px;
      padding: $XS;
    }
  }

  .sc-toggle-background {
    margin: 2px 0 0 2px;
    height: 19px;
    width: 19px;
    border-radius: 23px;
    background: white;
    transition: all 300ms;
  }
}