$hover-color: #C0E2FB;
$menu-default-color: #185898;
$border: 2px solid #0d0d0d;

.screen-location {
    max-width: 380px;
    fieldset {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
    }
    legend {
        font-weight: 600;
        padding: 10px 0;
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 0;        
        padding: 0;
        list-style: none;
        li {
            margin-bottom: 0;
            padding-bottom: 10px;
            flex-basis: 50%;
        }
    }
    input {
        width: 40px;
        height: 40px;
        margin: 0;
        position: relative;
        appearance: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        
        &:hover {
            cursor: pointer;
            &::after {  
                background-color: $hover-color;
            }
        }
        &:checked::after {    
            background-color: $menu-default-color;
        }

        &::before {
            display: none;
        }
        
        &::after {
            width: 19px;
            height: 19px;
            position: absolute;
            content: "";
            border: $border;
        }
    }
    .bottom-menu {
        padding-bottom: 0;
    }
    .screen-location-top, .screen-location-bottom {
        &-right {
            text-align: right;
            border-right: $border;
            &::after {
                right: 0;
                border-right: none;
            }
        }
        &-left {
            text-align: left;
            border-left: $border;
            &::after {
                left: 0;
                border-left: none;
            }
        }
    }
    .screen-location-top-right, .screen-location-top-left {
        border-top: $border;
        &::after {
            top: 0;
            border-top: none;
        }
    }
    .screen-location-bottom-right, .screen-location-bottom-left {
        border-bottom: $border;
        &::after {
            bottom: 0;
            border-bottom: none;
        }
    }
}

.settings-explanation {
    font-weight: 400;
    font-size: 0.8125rem;
}