@use 'sass:color';
@use '../../style/colors';

.bluetooth {
    margin-top: 0;

    * {
        font-size: 20px;
    }

    row {
        all: unset;
    }

    .toggle-button {
        padding: 4px;
        min-width: 30px;
        min-height: 30px;

        transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;

        box-shadow: 2px 1px 2px colors.$accent-color;
        margin: 4px 4px 4px 4px;
        background-color: colors.$window_bg_color;

        &.active {
            box-shadow: 0 0 0 white;
            margin: 6px 4px 2px 4px;
            background-color: color.adjust(colors.$window_bg_color, $lightness: -3%);
        }
    }
}