.themer-button {
    min-height: 53px;
    min-width: 53px;
    color: $colortext;
    font-family: Material Symbols Rounded;
    // background-image: url('images/svg/beatmappacks.svg');
    // background-size: auto 65%;
    // background-position: center;
}


.themer-button-false {
    min-height: 53px;
    min-width: 53px;
    color: $colortext;
    font-family: Material Symbols Rounded;
    // background-image: url('images/svg/beatmappacks.svg');
    // background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 60%, tint($overlay0, 10%) 60%);
    // background-size: 400% auto;
    // background-position: 90% 50%;
}

.themer-button-true {
    min-height: 53px;
    min-width: 53px;
    color: $colortext;
    font-family: Material Symbols Rounded;
    background-color: $overlay0;
    // background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 60%, tint($overlay0, 10%) 60%);
    // background-size: 400% auto;
    // background-position: 90% 50%;
}

.themer-action-button {
    @include rounding;
    min-height: 53px;
    min-width: 53px;
    color: $colortext;
    font-family: Material Symbols Rounded;
}

.themer-action-button:hover {
    background-color: $overlay0;
}

.themer-action-button:active {
    background-color: $overlay0;
}

.themer-action-button:focus {
    border: 2px solid $overlay0;
}

.themer-menu-box {
    @include window;
    @include rounding;
    border-radius: 15px;
    background-color: shade($colorbarbg, 4%);
    margin: 14px;
    transition: 250ms cubic-bezier(0.05, 0.7, 0.1, 1);
    // box-shadow: 2px 2px 6px #16161E;
}

.themer-title {
    font-family: 'Rubik', 'Material Symbols Rounded';
    font-size: 15pt;
    padding: .6rem;
    color: $colortext;
    font-size: 14pt;
}

.themer-prompt {
    color: $colortext;
    font-family: 'Rubik', 'Material Symbols Rounded';
    font-size: 12pt;
    padding: .6rem;
}

.themer-input {
    font-family: 'Rubik', 'Material Symbols Rounded';
    // background-color: $surface0;
    background-color: tint($colorbarbg, 4%);
    color: $colortext;
    border-radius: 10px;
    padding: 7px;
    margin-top: 2px;
    margin-bottom: 2px;
    border: 2px solid $overlay0;
    caret-color: $colortext;

    selection {
        background-color: rgba(154, 152, 152, 0.5);
    }
}

.themer-input:focus {
    border: 2px solid $colortext;
}

.themer-color-preview-section {
    @include rounding;
}

.themer-color-preview {
    min-height: 25px;
    min-width: 25px;
    border-radius: 5px;
    border-width: 55px;
}

.preview-0 {
    background-color: $color0;
}

.preview-1 {
    background-color: $color1;
}

.preview-2 {
    background-color: $color2;
}

.preview-3 {
    background-color: $color3;
}

.preview-4 {
    background-color: $color4;
}

.preview-5 {
    background-color: $color5;
}

.preview-6 {
    background-color: $color6;
}

.preview-7 {
    background-color: $color7;
}

.preview-primary {
    background-color: $primary;
}

.preview-onPrimary {
    background-color: $onPrimary;
}

.preview-primaryContainer {
    background-color: $primaryContainer;
}

.preview-onPrimaryContainer {
    background-color: $onPrimaryContainer;
}

.preview-secondary {
    background-color: $secondary;
}

.preview-onSecondary {
    background-color: $onSecondary;
}

.preview-secondaryContainer {
    background-color: $secondaryContainer;
}

.preview-onSecondaryContainer {
    background-color: $onSecondaryContainer;
}

.preview-tertiary {
    background-color: $tertiary;
}

.preview-onTertiary {
    background-color: $onTertiary;
}

.preview-tertiaryContainer {
    background-color: $tertiaryContainer;
}

.preview-onTertiaryContainer {
    background-color: $onTertiaryContainer;
}

.preview-background {
    background-color: $colorbarbg;
}

.preview-onBackground {
    background-color: $onBackground;
}

.preview-surface {
    background-color: $surface;
}

.preview-onSurface {
    background-color: $onSurface;
}