@import '../../../styles/variables';
@import './InputDate.module.scss';

.inputWrap {
    background: $brand-gradient;
    border-radius: $border-radius;
    padding: 2px;
    display: flex;
    position: relative;

    &.isFocused {
        background: $brand-black;
    }

    > div,
    > div > div {
        width: 100%;
    }
}

.inputWrapSearch {
    composes: inputWrap;

    .input {
        padding-left: $spacer * 1.5;
    }

    svg {
        position: absolute;
        left: $spacer / 2;
        width: 1.25rem;
        height: 1.25rem;
        top: 50%;
        margin-top: -.6rem;
        fill: rgba($brand-grey-light, .7);
    }
}

.input {
    font-size: $font-size-base;
    font-family: $font-family-base;
    font-weight: $font-weight-bold;
    color: $brand-black;
    border: none;
    box-shadow: none;
    width: 100%;
    background: $brand-white;
    padding: $spacer / 3;
    margin: 0;
    border-radius: $border-radius;
    transition: .2s ease-out;
    min-height: 43px;
    appearance: none;

    &:focus {
        border: none;
        box-shadow: none;
        outline: 0;
    }

    &::placeholder {
        font-family: $font-family-base;
        font-size: $font-size-base;
        color: $brand-grey-light;
        font-weight: $font-weight-base;
        transition: .2s ease-out;
        opacity: .7;
    }

    &[readonly],
    &[disabled] {
        background-color: $brand-grey-lighter;
        cursor: not-allowed;
        pointer-events: none;
    }

    // &::-webkit-credentials-auto-fill-button,
    // &::-webkit-caps-lock-indicator {
    //     background: $brand-white;
    // }

    // &:-webkit-autofill,
    // &:-webkit-autofill:hover,
    // &:-webkit-autofill:focus {
    //     -webkit-text-fill-color: $brand-white;
    //     box-shadow: 0 0 0 1000px $brand-black inset;
    //     transition: background-color 5000s ease-in-out 0s;
    // }
}

.select {
    composes: input;
    height: 43px;
    padding-right: 3rem;
    border: 0;

    // custom arrow
    background-image: linear-gradient(45deg, transparent 50%, $brand-purple 50%),
        linear-gradient(135deg, $brand-purple 50%, transparent 50%),
        linear-gradient(
            to right,
            $brand-pink 1px,
            lighten($brand-grey-lighter, 5%) 2px,
            lighten($brand-grey-lighter, 5%)
        );
    background-position: calc(100% - 18px) calc(1rem + 5px),
        calc(100% - 13px) calc(1rem + 5px), 100% 0;
    background-size: 5px 5px, 5px 5px, 2.5rem 3rem;
    background-repeat: no-repeat;

    &:focus {
        outline: 0;
        font-family: $font-family-base;
    }
}

.radioGroup {
    margin-top: $spacer / 2;
    margin-bottom: -2%;

    @media screen and (min-width: $break-point--small) {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

.radioWrap {
    position: relative;
    padding: $spacer / 2;
    text-align: center;
    display: flex;
    align-items: center;
    margin-bottom: 2%;

    @media screen and (min-width: $break-point--small) {
        flex: 0 0 49%;
    }
}

.radio {
    &:checked + label {
        border-color: $brand-pink;
    }
}

.radioLabel {
    margin: 0;
    padding: 0;
    font-weight: $font-weight-bold;
    font-size: $font-size-small;
    line-height: 1.2;
    border: 2px solid $brand-grey-lighter;
    border-radius: .2rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: $brand-grey;
    text-align: left;
    padding-left: 2.5rem;
    display: flex;
    align-items: center;
}

// Size modifiers

.inputSmall {
    composes: input;
    font-size: $font-size-small;
    min-height: 32px;
    padding: $spacer / 4;

    &::placeholder {
        font-size: $font-size-small;
    }
}

.selectSmall {
    composes: select;
    height: 32px;
    padding-right: 2rem;

    // custom arrow
    background-position: calc(100% - 14px) 1rem, calc(100% - 9px) 1rem, 100% 0;
    background-size: 5px 5px, 5px 5px, 2rem 3rem;
}