@import '../styles/_variables.scss';

.container {
    position: relative;

    .dropdown-options {
        position: absolute;
        width: inherit;
        overflow: auto;
        z-index: 1;
        background-color: $font-light;
        box-sizing: border-box;

        &.fixed {
            position: fixed;
        }

        &.default-dropdown-options {
            margin-block-start: 4px;
            border-radius: 4px;
            box-shadow: 0 1px 4px 0 $shadow-color;
            max-height: 300px;
        }

        .group-container {
            display: flex;
            flex-direction: column;
            margin-block-end: 12px;
        }

        .group {
            font-size: 12px;
            font-family: $duda-title-font;
            font-weight: 500;
            text-transform: uppercase;
            color: $text-dark-gray;
            padding-inline-start: 12px;
            padding-inline-end: 12px;
            margin-block-start: 12px;
            margin-block-end: 21px;
        }

        .option {
            font-family: $duda-title-font;
            padding-inline-start: 12px;
            padding-inline-end: 12px;
            padding-block-start: 6px;
            padding-block-end: 6px;
            cursor: pointer;

            &:hover {
                background-color: $light-gray;
            }
        }
    }
}