@import 'config';
@import '../variables';
@import '../utilities/mixins';

.#{$framework-prefix}control {
  --transform: translateY(calc(var(--shift) * -1)) scale(.75, .75);
  --inp-dis-bg-color: #{$inp-disabled-background-color};
  --inp-border-f-color: #{$inp-border-focus-color};
  --inp-border-h-color: #{$inp-border-hover-color};
  --inp-border-width: #{$inp-border-width};
  --inp-border-color: #{$inp-border-color};
  --inp-label-color: #{$inp-label-color};
  --inp-indent: #{$inp-indent};
  --inp-height: #{$inp-height};
  --shift: 12px;
  min-height: var(--inp-height);
  position: relative;
  cursor: pointer;
  &-errors {
    text-indent: var(--inp-indent);
    color: var(--red);
    font-size: 13px;
    margin-top: 5px;
  }
  &-label {
    transform-origin: var(--inp-indent);
    transition: var(--transition-time);
    padding-left: var(--inp-indent);
    color: var(--inp-label-color);
    height: var(--inp-height);
    width: calc(100% - 36px);
    @include text-overflow;
    pointer-events: none;
    align-items: center;
    position: absolute;
    user-select: none;
    font-size: 17px;
    display: flex;
    top: 0;
    &-icon {
      transform: scale(var(--icon-scale-koef, 1));
      width: var(--icon-size, 24px);
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      height: 100%;
      right: 24px;
      top: 0;

      &-ok {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="%2375AF26" fill-rule="evenodd" d="M17 6l2 3-9 9-5-6 2-2 3 3 7-7zm7 6a12 12 0 1 0-24 0 12 12 0 0 0 24 0z"/></svg>');
        @if $enable-blue-icons {
          &-blue {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="%2315B6D2" fill-rule="evenodd" d="M17 6l2 3-9 9-5-6 2-2 3 3 7-7zm7 6a12 12 0 1 0-24 0 12 12 0 0 0 24 0z"/></svg>');
          }
        }
      }
      @if $enable-blue-icons {
        &-blue-eye {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="11"><path fill="%2315B6D2" fill-rule="evenodd" d="M9 0C5 0 2 2 0 6a10 10 0 0 0 18 0c-2-4-5-6-9-6zm4 3l3 3a8 8 0 0 1-7 3 8 8 0 0 1-7-3 8 8 0 0 1 3-3v1c0 3 2 5 4 5s5-2 5-5l-1-1zM9 4L7 5 6 4l1-2 2 2z"/></svg>');
          &-hidden {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16"><g fill="%2315B6D2" fill-rule="evenodd"><path fill-rule="nonzero" d="M9 2C5 2 2 4 0 8a10 10 0 0 0 6 5 19881 19881 0 0 0 9-9L9 2zm-3 8l-1 1a8 8 0 0 1-3-3 9 9 0 0 1 3-3 4 4 0 0 0 1 5zm3-4a2 2 0 1 1-3 0 2 2 0 0 1 3 0z"/><rect width="2" height="20" x="9" y="-2" rx="1" transform="rotate(45 10 8)"/><path d="M15 7a4 4 0 0 1 1 1l-1 1-2 1-2 1-2 2 6-1a10 10 0 0 0 3-4l-1-1V5l-2 2z"/></g></svg>');
          }
        }
      }
      &-green-eye {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12"><g fill="none" fill-rule="evenodd"><path d="M0-4h18v18H0z"/><path fill="%2375AF26" d="M9 0C5 0 2 2 0 6a10 10 0 0 0 18 0c-2-4-5-6-9-6zm4 3l3 3a8 8 0 0 1-7 3 8 8 0 0 1-7-3 8 8 0 0 1 3-3v1c0 3 2 5 4 5s5-2 5-5l-1-1zM9 4L7 5 6 4l1-2 2 2z"/></g></svg>');
        &-hidden {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16"><g fill="none" fill-rule="evenodd" transform="translate(0 -1)"><path d="M0 0h18v18H0z"/><path fill="%2375AF26" fill-rule="nonzero" d="M9 3C5 3 2 5 0 9a10 10 0 0 0 6 5 19881 19881 0 0 0 9-9L9 3zm-3 8l-1 1a8 8 0 0 1-3-3 9 9 0 0 1 3-3 4 4 0 0 0 1 5zm3-4a2 2 0 1 1-3 0 2 2 0 0 1 3 0z"/><rect width="2" height="20" x="9" y="-1" fill="%2375AF26" rx="1" transform="rotate(45 10 9)"/><path fill="%2375AF26" d="M15 8a4 4 0 0 1 1 1l-1 1-2 1-2 1-2 2 6-1a10 10 0 0 0 3-4l-1-1V6l-2 2z"/></g></svg>');
        }
      }
      &-refresh {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="18"><g fill="none" fill-rule="evenodd"><path d="M1-1h18v18H1z"/><path fill="%2375AF26" fill-rule="nonzero" d="M10 0C7 0 4 2 3 4L1 2v6h6L4 5c1-2 3-3 6-3s6 3 6 6a6 6 0 0 1-12 2H2c1 4 4 6 8 6s8-3 8-8c0-4-4-8-8-8z"/></g></svg>');
        @if $enable-blue-icons {
          &-blue {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="18"><path fill="%2315B6D2" d="M10 0C7 0 4 2 3 4L1 2v6h6L4 5c1-2 3-3 6-3s6 3 6 6a6 6 0 0 1-12 2H2c1 4 4 6 8 6s8-3 8-8c0-4-4-8-8-8z"/></svg>');
          }
        }
      }
      &-search {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19"><g fill="%2375AF26" fill-rule="evenodd"><rect width="9" height="2" x="10" y="14" rx="1" transform="rotate(45 15 15)"/><path fill-rule="nonzero" d="M2 7c0 3 2 6 5 6s5-3 5-6-2-5-5-5-5 2-5 5zM0 7c0-4 3-7 7-7s7 3 7 7-3 8-7 8-7-4-7-8z"/></g></svg>');
        @if $enable-blue-icons {
          &-blue {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19"><g fill="%2315B6D2" fill-rule="evenodd"><rect width="9" height="2" x="10" y="14" rx="1" transform="rotate(45 15 15)"/><path fill-rule="nonzero" d="M2 7c0 3 2 6 5 6s5-3 5-6-2-5-5-5-5 2-5 5zM0 7c0-4 3-7 7-7s7 3 7 7-3 8-7 8-7-4-7-8z"/></g></svg>');
          }
        }
        &-gray {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19"><g fill="%23A0A0A0" fill-rule="evenodd"><rect width="9" height="2" x="10" y="14" rx="1" transform="rotate(45 15 15)"/><path fill-rule="nonzero" d="M2 7c0 3 2 6 5 6s5-3 5-6-2-5-5-5-5 2-5 5zM0 7c0-4 3-7 7-7s7 3 7 7-3 8-7 8-7-4-7-8z"/></g></svg>');
        }
      }
      &-datepicker {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><g fill="none" fill-rule="evenodd"><g transform="translate(0 2)"><rect width="16" height="14" x="1" y="1" stroke="%2375AF26" stroke-width="2" rx="2"/><path fill="%2375AF26" d="M12 4h2v2h-2V4zM8 4h2v2H8V4zm4 3h2v2h-2V7zM8 7h2v2H8V7zM4 7h2v2H4V7zm8 3h2v2h-2v-2zm-4 0h2v2H8v-2zm-4 0h2v2H4v-2z"/></g><path fill="%2375AF26" d="M3 0h2v2H3zm10 0h2v2h-2z"/></g></svg>');
        @if $enable-blue-icons {
          &-blue {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><g fill="%2315B6D2" fill-rule="evenodd"><path fill-rule="nonzero" d="M2 4v12h14V4H2zm0-2h14l2 2v12l-2 2H2l-2-2V4l2-2z"/><path d="M12 6h2v2h-2V6zM8 6h2v2H8V6zm4 3h2v2h-2V9zM8 9h2v2H8V9zM4 9h2v2H4V9zm8 3h2v2h-2v-2zm-4 0h2v2H8v-2zm-4 0h2v2H4v-2zM3 0h2v2H3zm10 0h2v2h-2z"/></g></svg>');
          }
        }
      }
      &-clear {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18"><defs><path id="a" d="M25 223l6-7a1 1 0 0 1 2 2l-7 6 7 6a1 1 0 0 1-2 2l-6-7-6 7a1 1 0 0 1-2-2l7-6-7-6a1 1 0 0 1 2-2l6 7z"/></defs><g fill="none" fill-rule="evenodd" transform="translate(-16 -215)"><use fill="%23D8D8D8" xlink:href="%23a"/><path stroke="%23979797" d="M32 217l-7 6-7-6 6 7-6 7 7-6 7 6-6-7 6-7z"/></g></svg>');
      }
      &-caret {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7"><path fill="%233A424C" fill-rule="evenodd" d="M0 0h11L5 7z"/></svg>');
      }
      &-error {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g fill="none" fill-rule="evenodd"><path fill="%23FF4C4C" d="M24 12a12 12 0 1 0-24 0 12 12 0 0 0 24 0z"/><path fill="%23FFF" d="M14 13h-4V5h4z"/><circle cx="12" cy="17" r="2" fill="%23FFF"/></g></svg>');
      }
      &-arrow-next {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="14"><path fill="%2375AF26" fill-rule="evenodd" d="M8 8H0V6h8L4 2l2-1 6 6-6 6-2-1z"/></svg>');
        @if $enable-blue-icons {
          &-blue {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><path fill="%2315B6D2" fill-rule="evenodd" d="M8 7H0V5h8L4 1l2-1 6 6-6 7-2-2z"/></svg>');
          }
        }
        &-gray {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><path fill="%23A0A0A0" fill-rule="evenodd" d="M8 7H0V5h8L4 1l2-1 6 6-6 7-2-2z"/></svg>');
        }
      }
      &-upload {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13"><path fill="%2375AF26" fill-rule="evenodd" d="M8 4v8H6V4L2 8 1 6l6-6 6 6-1 2z"/></svg>');
        @if $enable-blue-icons {
          &-blue {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"><path fill="%2315B6D2" fill-rule="evenodd" d="M7 4v8H5V4L1 8 0 6l6-6 7 6-2 2z"/></svg>');
          }
        }
      }
    }
    .#{$framework-prefix}control-input:focus + & {
      transform: var(--transform);
    }
  }
  &-input {
    padding-right: calc(var(--icon-size) + var(--inp-indent) + 12px);
    border: var(--inp-border-width) solid var(--inp-border-color);
    text-indent: calc(var(--inp-indent) - var(--inp-border-width));
    transition: background-color var(--transition-time);
    color: var(--main-black-color);
    height: var(--inp-height);
    @include text-overflow;
    box-sizing: border-box;
    font-size: 17px;
    width: 100%;
    &-error {
      border-color: var(--red);
    }
    &:disabled {
      background-color: var(--inp-dis-bg-color);
    }
    &:hover {
      border-color: var(--inp-border-h-color);
    }
    &::placeholder {
      color: transparent;
    }

    &:valid, &[value]:disabled {
      padding-top: var(--shift);
      & + .#{$framework-prefix}control-label {
        transform: var(--transform);
      }
    }
    &:focus {
      border-color: var(--inp-border-f-color);
      padding-top: var(--shift);
      outline: none
    }
  }
}