@import 'scss/styles.scss';

.basic-state {
    transition: background-color $transitionDuration;

    &:hover {
        .header {
            color: $black;
        }
    }
    .input-wrapper {
        input {
            border: 0;
            outline: none;
            padding-left: 0px;
            &:focus {
                border: 0;
            }
            
        }        
    }
    .mirror-span {
        top: 0;
        font: inherit;
    }

    .transition-background {
        transition: background-color .2s ease-in;
    }

    .transition-fill {
        svg path,
        svg circle {
            transition: fill .2s ease-in;
        }
    }
}

.dropdown-items {
    z-index: 11;
    max-height: 244px;
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 4px;
    }
    
    &::-webkit-scrollbar-thumb {
        background-color: $muted;
        width: 2px;
        border: 2px solid $black-2;
        border-radius: 3px;
    }
}