@import '../../../sass/colors';

.menu {
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 0.125rem;
    min-width: 10rem;
    width: 100%;

    &.borderless {
        border: none !important;
    }

    &.quartz {
        border: $color-slate-400 1px solid;
        background-color: $color-slate-50;
    }

    &.glass {
        background-color: rgba($color-slate-50, 0.3);
        backdrop-filter: blur(18px);
    }

    &.light-glass {
        background-color: rgba($color-slate-50, 0.1);
        backdrop-filter: blur(24px);
        border: none;
    }

    &.dark-mode {
        &.borderless {
            border: none;
        }

        &.quartz {
            background-color: $color-slate-800;
            border-color: $color-slate-900;
        }

        &.glass {
            background-color: rgba($color-slate-700, 0.3);
            border-color: $color-slate-700;
        }

        &.light-glass {
            background-color: rgba($color-slate-950, 0.1);
        }
    }

    .item {
        list-style-type: none;
        margin: 0;
        padding: 0.5rem;
        border-radius: 0.5rem;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.2s;
        font-size: 0.85rem;

        &.primary-color {
            background-color: rgba($color-primary-100, 0);
            color: $color-primary-500;
            &:hover {
                background-color: $color-primary-100;
            }
            &.dark-mode {
                &:hover {
                    background-color: $color-primary-700;
                }
            }
        }

        &.normal-color {
            background-color: rgba($color-slate-100, 0);
            color: $color-slate-900;
            &:hover {
                background-color: $color-slate-100;
            }
            &.dark-mode {
                color: $color-slate-100;
                &:hover {
                    background-color: $color-slate-700;
                }
            }
        }
    }
}