.container {
    width: 100%;
    height: rem(50px);
    border-radius: var(--mantine-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    @mixin light {
        color: var(--mantine-color-gray-7);
    }
    @mixin dark {
        color: var(--mantine-color-dark-0);
    }

    &:hover {
        @mixin light {
            background-color: var(--mantine-color-gray-1);
        }
        @mixin dark {
            background-color: var(--mantine-color-dark-6);
        }
    }
}


.icon {
    width: rem(18px);
    height: rem(18px);
}

.light {
    display: block;
}

.dark {
    display: none;
}

:global([data-mantine-color-scheme='dark']) .light {
    display: none;
}

:global([data-mantine-color-scheme='dark']) .dark {
    display: block;
}
