@import 'common/vars';

$head-bg: #e8e8e8;

.switches-root {
    .switch-root {
        .head {
            padding: 1rem .5rem;
            background: $head-bg;
            border-top: $default-border-2;
            border-bottom: $default-border-2;
            text-transform: uppercase;
        }

        .switches {
            display: flex;
            flex-direction: column;
            padding: 1rem;
        }

        .device {
            display: flex;
            align-items: center;

            .toggle {
                text-align: right;
            }

            &:hover { background: $hover-bg; }
            &:not(:last-child) { border-bottom: $default-border-2; }
        }
    }
}

