/**********************/
/*** GLOBAL STYLES  ***/
/**********************/

body{
    --margin-std:           1rem;

    margin:                 0;
    /** Disable native touch actions where possible: includes scroll (i.e. single page interface only) **/
    touch-action:           none;
    user-select:            none;
    -webkit-user-select:    none;
    -webkit-touch-callout:  none;
}


main{
    display:                flex;
    justify-content:        center;
    max-height:             100dvh;

    input,
    select, 
    button{
        margin:             0;
        padding:            0;
        border-radius:      0;
        border:             none;
        background:         none;
        cursor:             pointer;

        &:focus {
            outline:            none;
            box-shadow:         none;
            border:             none;
        }
    }

    .hide{
        display:                none !important;
    }
}



/**************************/
/*** VIGNETTE BACKGROUND ***/
/**************************/

.vignette{
    --vignette-color: rgba(0,0,0,0.8);
    -webkit-box-shadow: inset 0px 0px 30vmin var(--vignette-color);
    -moz-box-shadow:    inset 0px 0px 30vmin var(--vignette-color);
    box-shadow:         inset 0px 0px 30vmin var(--vignette-color);
}


/**************************/
/*** GLASS BUTTON STYLE ***/
/**************************/

button.glass-button {
    /* Positioning & Shape */
    position:           relative;
    display:            inline-block;
    overflow:           hidden;
    transition:         all 0.3s ease;
    
    /* The "Glass" Core */
    background:         rgba(255, 255, 255, 0.1); /* Subtle white tint */
    border:             1px solid rgba(255, 255, 255, 0.2); /* Thin translucent border */
    box-shadow:         0 8px 32px 0 rgba(0, 0, 0, 0.15); /* Soft outer depth */
    
    /* The Blur Effect (Apple Style) */
    backdrop-filter:            blur(15px) saturate(180%);
    -webkit-backdrop-filter:    blur(15px) saturate(180%);


    /* The Top Highlight (Inner Glow) */
    &::before {
        content:                "";
        position:               absolute;
        top:                    0; 
        left:                   0; 
        right:                  0;
        height:                 40%;
        background:             linear-gradient( rgba(255, 255, 255, 0.15),  rgba(255, 255, 255, 0) );
        pointer-events:         none;
    }


    /* Hover & Active States */
    &:hover {
        background:            rgba(255, 255, 255, 0.2);
        box-shadow:             0 12px 40px 0 rgba(0, 0, 0, 0.2);
        color:                  rgba(255, 255, 255, 0.85);
    }

    &.active,
    &:active {
        transform:              translateY(0);
        background:            rgba(255, 255, 255, 0.12);
        color:                  rgba(255, 255, 255, 0.85);
    }
}


/*****************************/
/*** AUDIO CONTROL SECTION ***/
/*****************************/

section.controls__container{
    --button-width:             5dvh;
    display:                    grid;
    grid-template-columns:      1fr;
    grid-template-rows:         1fr;
    height:                     15dvh;
    color:                      var(--color-bg);
    background:                 var(--color-purple);

    .init-button-container,
    .control-button-container{
        grid-area:              1 / 1 / 2 / 2;
        display:                flex;
        justify-content:        center;
        align-items:            center;
        pointer-events:         none;
    } 

    .control-button-container{
        display:                grid;
        grid-template-columns:  1fr auto 1fr;
        justify-content:        center;
    }

    button{
        font-size:              calc(var(--button-width) * 0.45);
        color:                  rgba(255, 255, 255, 0.35);
        pointer-events:         all;
        cursor:                 pointer;

        &#init-button{
            font-size:              5dvh;
        }

        &#init-button,
        &#transport-button {
            width:                  calc(var(--button-width) * 1.75);
            height:                 calc(var(--button-width) * 1.75);
            display:                flex;
            justify-content:        center;
            align-items:            center;
            border-radius:          50%;
        }   
    }

    .button__container{
        display:                flex;
        justify-content:        center;
        align-items:            center;

        &:not(.mode),
        &:not(.action){
            padding:            0 1vmin
        }
        &.play{
            opacity:                1;
        }

        &.action.fx .up-down,
        &.button__container.fx-buttons{
            display:                none;               /* Hide action/fx buttons depending on mode */ 
        }

        &.action.fx .fx-buttons{       
            display:                flex;
        }

    }

    .multi-action-container{
        display:                grid;
        grid-template-rows:     1fr 2fr 1fr;
        width:                  100%;
        height:                 100%;

        .mode-label{
            font-size:          1.15vmin;
            color:              var(--color-fg);
            display:            flex;
            width:              100%;
            justify-content:    center;
            align-items:        center;
            opacity:            0.5
        }
    
        button.up,
        button.down{
            height:             calc(var(--button-width));
            width:              calc(var(--button-width));
            margin:             0 calc(0.075 * var(--button-width));
            transition:         all 400ms;
        }

        button.up{
            border-radius:      0 var(--button-width) var(--button-width) 0;
        }

        button.down{
            border-radius:      var(--button-width) 0 0 var(--button-width);
        }

        .button__container.fx-buttons{
            margin:             0  calc(var(--button-width) * 0.25) ; 
        }

        .fx-buttons__wrapper{
            display:            flex;
            width:              100%;
            justify-content:    space-around;
        }

        button.fx-button{
            height:             calc(var(--button-width) );
            width:              calc(var(--button-width) );
            border-radius:      var(--button-width);
            font-size:          small;
        }
    }

    .svg-button{
        width:                  100%;
    }

    path.icon{
        fill:               var(--color-light);
        transition:         all 400ms;
    }
}


@media (max-width: 768px)  {

    section.controls__container{
        .multi-action-container{
            .mode-label{
                font-size:          1vmax;
            }
        }
    }
}