.flat-select {
    // Default style
    display: flex;

    // Variables
    --color: var(--digital-blue-80);
    --background-color: var(--digital-blue-10);
    --height: 40px;
    --padding: 10px 15px;
    --border-radius: 8px;
    --border: 1px solid var(--digital-blue-20);
    --gap: 16px;

    // Style override
    gap: var(--gap);

    .flat-select-option {
        // Default style
        display: flex;
        align-items: center;
        justify-content: center;

        // Style override
        min-width: var(--height);
        height: var(--height);
        padding: var(--padding);
        color: var(--color);
        text-align: center;
        background-color: var(--background-color);
        border: var(--border);
        border-radius: var(--border-radius);
        cursor: default;

        &.disabled,
        &:disabled {
            --background-color: var(--grey-40);
            --color: var(--grey-80);
            --border: 1px solid var(--grey-40);
        }

        &.selectable {
            --color: var(--grey-80);
            --background-color: var(--white);
            --border: 1px solid var(--grey-40);

            cursor: pointer;

            &:hover {
                --background-color: var(--grey-20);
            }

            &.disabled {
                cursor: default;

                --background-color: var(--grey-40);
                --color: var(--grey-80);
                --border: 1px solid var(--grey-40);
            }
        }

        &:empty {
            display: none;
        }

        & span.mod-append-prepend {
            gap: 10px;
        }

        &.mod-link,
        &.selectable.mod-link {
            padding: 0;
            color: var(--navy-blue-80);
            font-size: var(--default-font-size);
            background-color: var(--white);
            border: none;

            .icon {
                fill: var(--navy-blue-80);
            }

            &.disabled {
                color: var(--deprecated-medium-grey);

                .icon {
                    fill: var(--deprecated-medium-grey);
                }
            }
        }
    }

    &.mod-btn-group {
        --gap: 0;

        border-radius: 8px;

        .flat-select-option {
            @extend .flat-select-option;

            flex-grow: 1;
            border-radius: 0;

            &:focus {
                z-index: 1;
            }

            &:first-child {
                border-radius: 8px 0 0 8px;
            }

            &:last-child {
                border-radius: 0 8px 8px 0;
            }
        }
    }

    &.mod-option-picker {
        @extend .mod-btn-group;

        .flat-select-option {
            --height: 30px;
            --padding: 5px 8px;
        }
    }
}

.prepended-flat-select {
    display: flex;
    align-items: center;

    .flat-select-prepend {
        margin-right: 10px;
        color: var(--title-text-color);
        font-weight: var(--main-font-bolder);
        font-size: var(--default-font-size);
        line-height: 18px;
    }
}