@mixin area-selectable($border: false) {
    cursor: pointer;
    border-radius: 0;
    -webkit-app-region: no-drag;
    @if ($border) {
        border-#{$border}: selected-transparent-border();
    }
    &:hover,
    &.sel--active {
        background-color: var(--intermediate-background-color);
        color: var(--medium-color);
        @if ($border) {
            border-#{$border}: selected-hover-border();
        }
    }
    &:active {
        background-color: var(--intermediate-pressed-background-color);
    }
}

@mixin area-selected($border) {
    cursor: default;
    -webkit-app-region: no-drag;
    border-#{$border}: selected-border();
    background-color: var(--secondary-background-color);
    &:hover {
        color: var(--text-color);
    }
}
