@use "constants";
@use "snap_assist";

.layouts-box-layout {
    spacing: 12px;
}

.layout-button {
    transition: 100ms ease all;
    padding: calc(constants.$base_padding / 2);
    border-radius: snap_assist.$snap-assist-tile-border-radius;
    border-width: snap_assist.$snap-assist-tile-border-width;
    border-color: transparent;

    .snap-assist-tile {
        border-color: rgba(255, 255, 255, 0.4);
        background-color: rgba(255, 255, 255, 0.1);
    }

    .snap-assist-tile.dark {
        border-color: #939393;
        background-color: #e2e2e2;
    }
}

.layout-button:hover,
.layout-button:checked {
    border-color: rgba(255, 255, 255, 0.7);

    .snap-assist-tile {
        border-color: rgba(255, 255, 255, 0.7);
        background-color: rgba(255, 255, 255, 0.25);
    }

    .snap-assist-tile.dark {
        border-color: #6c6c6c;
        background-color: #c4c4c4;
    }
}