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

.settings {
    padding: 0.5rem;

    .button {
        background-color: colors.$window_bg_color;
        border: 0.1rem solid color.adjust(colors.$window_bg_color, $lightness: -3%);
        border-radius: 0.7rem;
        padding: 0.3rem;

        &.toggled {
            background-color: colors.$accent-color;
        }
    }
}

.osk {
    padding-top: 4px;
    border-radius: 10px 10px 0;

    &.hidden {
        opacity: 0;
    }

    .side {
        .key {
            &:active label {
                background-color: colors.$accent-color;
            }

            label {
                background-color: colors.$window_bg_color;
                border: 0.08rem solid color.adjust(colors.$window_bg_color, $lightness: -3%);
                border-radius: 0.7rem;
                min-height: 3rem;

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

                &.normal,
                &.Super {
                    min-width: 3rem;
                }

                &.Tab,
                &.Backspace {
                    min-width: 7rem;
                }

                &.Enter,
                &.Caps {
                    min-width: 8rem;
                }

                &.Shift {
                    min-width: 9rem;
                }

                &.Space {
                    min-width: 20rem;
                }

                &.PrtSc,
                &.AltGr {
                    min-width: 3.2rem;
                }

                &.active {
                    background-color: color.adjust(colors.$window_bg_color, $lightness: -3%);
                }

                &.altgr {
                    border: 0.08rem solid blue;
                }
            }
        }

        &.right-side {
            .key .mod {
                &.Ctrl {
                    min-width: 2.4rem;
                }
            }
        }

        &.left-side {
            .key .mod {
                &.Alt {
                    min-width: 3rem;
                }

                &.Ctrl {
                    min-width: 4rem;
                }
            }
        }
    }
}