/*
    Copyright (c) 2001 Envision Technology Partners, Inc. All rights reserved.
*/

/*
    This file is where we will have styles for the Switch-List control
*/

fieldset[data-switchlist] {
    margin-bottom: 1rem;
}


.switchlist-buttons {
    flex-direction: row;
    justify-content: center;
    margin-top: 13px;
}

    .switchlist-buttons > button {
        margin: 5px;
        width: 30px;
        height: 30px;
    }


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .switchlist-buttons {
        margin-top: 0;
    }

    .switchlist-buttons > button {
        transform: rotate(90deg);
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .switchlist-buttons {
        margin-top: 0;
    }

    .switchlist-buttons > button {
        transform: rotate(90deg);
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .switchlist-buttons {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 80px;
    }
}