@use 'styles/settings.scss'as s;

.dropdown-container {
    position: relative;
    cursor: pointer;
    padding-bottom: 5px;

    .current-item {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: s.$weight-bold;

    }
    
    &.inactive {
        cursor: text;
        .icon {
            display: none;
        }
    }

    &.open {
        .dropdown {
            opacity: 1;
            transform: translateY(100%);
            visibility: visible;
        }

        .icon {
            transform: rotate(180deg);
        }
    }

    .dropdown {
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translateY(75%);
        background: s.$white;
        z-index: 2000;
        border-radius: 5px;
        white-space: nowrap;
        box-shadow: 0 0 5px rgba(s.$black, 0.05);
        visibility: hidden;
        opacity: 0;
        &.right {
            right: 0;
            left: auto;
        }


        .dropdown-item {
            padding: 10px 20px;
            display: block;
            color: s.$body-color;
            border-radius: 5px;

            &:hover {
                box-shadow: 0 0 10px rgba(s.$black, 0.1);
            }
        }
    }
}