@import './color';
@import './shapes';
@import './typography';

@mixin input-search {
  width: 100%;
  border: none;
  padding-left: 10px;
  text-overflow: ellipsis;
  background-color: $grey-8;
  color: $grey-3;
  outline: none;
  font-style: italic;
}

.form-input {
  width: 296px;
  background: $grey-8;
  border: 1px solid $grey-5;
  box-sizing: border-box;
  border-radius: $input-radius;
  height: 36px;
  padding: 8px;
  @include lato-regular-14;
}
.form-input:focus {
  border: 1px solid $grey-3;
  outline: none !important;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  margin-left: -55px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 10px;
  background-color: $white;
  border-radius: 7px;
  width: 34px;
  height: 14px;
  border: 1px solid $grey-4;
}

.slider:before {
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  left: -6px;
  bottom: -3px;
  background-color: $grey-4;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  border: 1px solid $primary-color;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-color: $primary-color;
}