$field-height: 2.5;
$types: ( prm, sec, ter );

// $types: ( prm, sec, ter );
// $icon: 40;
// $padding: 0.5;
// $invalid: color(dgr) !important;

// .field {
//     &__block {
//         &.disabled {
//             opacity: 0.5;
//             pointer-events: none;
//         }
//     }
//     &__label {
//         transition: 0.5s ease;

//         @include root('.field__block.invalid') {
//             color: $invalid;
//         }
//     }
//     &__fixes {
//         border: 1px solid rgba(color(blk), 0.20);
//     }
//     &__infix {
//         max-width: 100%;
//     }
//     &__prefix, &__suffix {
//         width: em($icon);
//     }
//     &__effect {
//         &.underline {
//             background: rgba(color(blk), 0.20);
//             height: 2px;
//             transition: 0.5s ease;

//             @each $type in $types {
//                 @include root('.field__block.#{$type}.hover') {
//                     background: color($type, 300);
//                 }
//                 @include root('.field__block.#{$type}.focus') {
//                     background: color($type, 300);
//                 }
//             }
//             @include root('.field__block.invalid') {
//                 background: $invalid;
//             }
//         }
//     }

//     // FIELDS
//     &__inputbox {
//         background: rgba(color(blk), 0.10);
//         width: 100%;
//         height: ($min-height)+em;
//         border: 0;
//         margin: 0;
//         padding: ($padding)+em;
//         font: unset;
//         line-height: 1;
//         color: inherit;
//         outline: 0;

//         @include root('.field__infix.prefix') {
//             padding-left: em($icon);
//         }
//         @include root('.field__infix.suffix') {
//             padding-right: em($icon);
//         }
//         &.textarea {
//             width: 100% !important;
//             min-height: (2 * $min-height)+em;
//             line-height: 1.25;
//         }
//         &.date {
//             cursor: pointer;
//         }
//         &.password {
//             padding-right: em($icon);
//         }
//     }
//     &__checkbox {
//         @include widthHeight(em(20));
//         margin: 0;
//         padding: 0;
//         font: unset;

//         &--box {
//             border: em(2) solid rgba(color(blk), 0.20);
//             transition: border-width 0.25s ease 0.25s, border-color 0.25s ease;

//             @include root('.field__checkbox.isChecked') {
//                 border-width: em(10);
//                 transition: 0.25s ease;
//             }
//             @each $type in $types {
//                 @include root('.field__block.#{$type} .field__checkbox.isChecked') {
//                     border-color: color($type, 300);
//                 }
//                 @include root('.field__block.#{$type} .field__checkbox:hover') {
//                     border-color: color($type, 700);
//                 }
//                 @include root('.field__block.#{$type}.focus') {
//                     border-color: color($type, 700) !important;
//                 }
//             }
//             @include root('.field__block.invalid') {
//                 border-color: $invalid;
//             }
//         }
//         &--tick {
//             @include widthHeight(em(14));
//             opacity: 0;
//             transition: 0.25s ease;

//             @include root('.field__checkbox.isChecked') {
//                 opacity: 1;
//                 transition: 0.25s ease 0.25s;
//             }
//         }
//     }
//     &__select {
//         &--label {
//             min-width: 0;
//         }
//         &--box {
//             @include position(null, null, em(-5), null, em(-5));
//             border-radius: 5px;
//             box-shadow: 0 0 10px rgba(color(blk), 0.50);
//             overflow: hidden;
//             z-index: 1;
//         }
//         &--options {
//             background: color(wht);
//             max-height: (5 * $min-height)+em;
//             overflow-x: hidden;
//             overflow-y: auto
//         }
//     }
//     &__option {
//         background: transparent;
//         min-width: 0;
//         min-height: ($min-height)+em;

//         &.isSelected {
//             background: color(lte, 300);

//             @each $type in $types {
//                 @include root('.field__block.#{$type}') {
//                     color: color($type) !important;
//                 }
//             }
//         }
//         &:hover {
//             background: color(lte, 100);
//         }

//         &-group {
//             &--label {
//                 min-height: ($min-height)+em;
//                 cursor: default;
//             }
//         }
//     }
//     &__radio {
//         @include widthHeight(em(20));
//         border: em(2) solid;
//         border-radius: 50%;
//         color: rgba(color(blk), 0.20);
//         outline: none;
//         transition: color 0.25s ease;
        
//         &.isChecked {
//             @each $type in $types {
//                 @include root('.field__block.#{$type}') {
//                     color: color($type, 300);
//                 }
//             }
//         }
//         &:hover {
//             @each $type in $types {
//                 @include root('.field__block.#{$type}') {
//                     color: color($type, 700);
//                 }
//             }
//         }
//         &:focus {
//             @each $type in $types {
//                 @include root('.field__block.#{$type}') {
//                     color: color($type, 700);
//                 }
//             }
//         }

//         &--circle {
//             background-color: currentColor;
//             @include widthHeight(0);
//             border-radius: 50%;
//             overflow: hidden;
//             transition: background-color 0.25s ease, width 0.25s ease, height 0.25s ease;

//             @include root('.field__radio.isChecked') {
//                 @include widthHeight(em(10));
//             }
//         }
//     }
// }