@import "./color";

@mixin inputWrapper{
    $root: &;
    border-radius: 8px;
    background: color(white, 2);
    border: 1px solid color(grey, 5, 1);
    color: color(dark);
    width: 100%;
    transition: all .2s ease;

    &#{$root}--focus {
        border: 1px solid color(dark, 4, 1);
        background: color(white, 2, 1);
    }

}
@mixin transparentWrapper($root){
    background: rgba(255,255,255, .3);;
    border: 1px solid transparent;
    transition: background .3s ease, box-shadow, .3s ease-in;

    @at-root #{$root}--focus#{&}, &:hover{
        background: color(white,2, .5);
        border: 1px solid rgba(92, 42, 103, 0.2);
    }
    @at-root #{$root}--readOnly#{&}{
        background: transparent;
        pointer-events: none;
        &:hover{
            background-color: transparent;
        }
    }
}