@import "../../styles/color";
@import "../../styles/sizes";
@import "../../styles/flex";
@import "../../styles/media";
@import "../../styles/typography";

.one-ui-wrapper {
    $root: &;
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: flex-start;
    color: inherit;
    background-color: transparent;
    transition: background-color .3s ease;
    box-sizing: border-box;//todo: experimental
    background-position: center center;
    background-size: cover;

    @include fontSetup();
    @include setColor();
    @include setSize(padding);
    @include setMargin();
    @include setRadius();


    &--direction {
        @mixin Row{
            flex-direction: row;
            //flex: 1;
            #{$root}--lastChildMargin{
                div:last-child{
                    margin-right: 0;
                }
            }
            &#{$root} {
                &--valign {
                    &-top {
                        align-items: flex-start;
                    }

                    &-center {
                        align-items: center;
                    }

                    &-bottom {
                        align-items: flex-end;
                    }
                    &-stretch {
                        align-items: stretch;
                    }
                }
            }
            &#{$root}{
                &--align {
                    &-left {
                        justify-content: flex-start;
                    }

                    &-center {
                        justify-content: center;
                    }

                    &-right {
                        justify-content: flex-end;
                    }
                    &-space-between {
                        justify-content: space-between;
                    }
                    &-space-around {
                        justify-content: space-around;
                    }
                }
            }
        }
        @mixin Column{
            flex-direction: column;
            width: 100%;

            #{$root} {
                width: 100%;
            }
            #{$root}--lastChildMargin{
                div:last-child{
                    margin-bottom: 0;
                }
            }

            &#{$root} {
                &--align {
                    &-center {
                        align-items: center;

                        > .one-ui-title, > .one-ui-description, > .one-landing-paragraph, > .one-landing-title {
                            justify-content: center;
                            text-align: center;
                        }
                    }

                    &-right {
                        align-items: flex-end;

                        > .one-ui-title, > .one-ui-description, > .one-landing-paragraph, > .one-landing-title {
                            justify-content: flex-end;
                            text-align: right;
                        }
                    }
                }

                &--valign {
                    &-top {
                        justify-content: flex-start;
                    }

                    &-center {
                        justify-content: center;
                    }

                    &-bottom {
                        justify-content: flex-end;
                    }
                    &-stretch {
                        justify-content: stretch;
                    }
                }
            }
        }
        $sizes:(xsm, sm, md, lg, xlg,);
        &-row {
            @include Row;
            @each $size in $sizes{
                &.one-ui-wrapper--mediaColumn-#{$size}{
                    @include media('',$size){
                        @include Column();
                    }
                }
            }
        }
        &-column {
            @include Column;
        }


    }

    &--hover:hover{
        background-color: color(grey, 2, .4);

        & > #{$root}--frame-solid-gray{
            background-color: color(grey, 2, .6);
        }
    }

    &--frame {
        &-solid {
          &-default {
            background: color(white, 1, 0.1);
            border-radius: 16px;
            box-shadow: 0 32px 64px -24px rgba(105, 73, 190, 0.32), inset 0px 16px 40px rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(32px);
          }
          &-shadow-blur-transparent-md {
            background: color(white, 1, 0.1);
            border-radius: 12px;
            box-shadow: 0 32px 64px -24px rgba(105, 73, 190, 0.32), inset 0px 16px 40px rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(32px);
          }

          &-shadow-blur-transparent-sm {
            background: color(white, 1, 0.1);
            border-radius: 12px;
            box-shadow: 0 12px 16px -6px rgba(105, 73, 190, 0.32), inset 0px 16px 40px rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(32px);
          }

          &-shadow-blur-transparent {
            background: color(white, 1, 0.1);
            border-radius: 12px;
            box-shadow: 0px 32px 64px -24px rgba(105, 73, 190, 0.32), inset 0px 16px 40px rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(32px);

          }
            &-grey {
                background-color: color(grey, 2, .4);
                @at-root #{$root}--frame-solid-bg > &{
                    background-color: color(grey, 2, .3);
                }
                &#{$root}--hover:hover{
                    background-color: color(grey, 2, .6);
                    & > #{$root}--frame-solid-gray{
                        background-color: color(grey, 2, .6);
                    }
                }
                &-border-grey{
                    background-color: color(grey, 2, .4);
                    @at-root #{$root}--frame-solid-bg > &{
                        background-color: color(grey, 2, .3);
                    }
                    &#{$root}--hover:hover{
                        background-color: color(grey, 2, .6);
                        & > #{$root}--frame-solid-gray{
                            background-color: color(grey, 2, .6);
                        }
                    }
                    border: 1px color(gray, 2) solid;
                }
            }
            &-grey-1 {
                background-color: color(grey, 1);
            }

            &-bg {
                background-color: color(bg);
            }
            &-dark {
                background-color: color(dark,1);
                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
            }

            &-key {
                background-color: color(key);
                color: color(white);
                &#{$root}--hover:hover{
                    background-color: color(key, 2);
                }
            }

            &-white {
                background-color: color(white);
                color: color(dark);
            }

            &-green-translucent {
                background-color: color(green, 1, .15);
            }

            &-key-translucent {
                background-color: color(key, 1, .1);
            }

            &-red-translucent {
                background-color: color(red, 1, .1);
            }

            &-shadow-md {
                box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
            }

            &-shadow-xl {
                background-color: color(white);
                box-shadow: 0px 47.5085px 166.28px rgba(0, 0, 0, 0.15);
            }

            &-shadow-thin {
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
                &-bottom {
                    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
                }
            }
        }

        &-border {
            &-gray {
                border: 1px color(gray, 2) solid;
            }
            &-key {
                border: 1px color(key) solid;
            }
        }
        &-border-2 {
            &-gray {
                border: 2px color(gray, 2) solid;
            }
            &-key {
                border: 2px color(key) solid;
            }
        }
    }



    &--fullWidth {
        width: 100%;
    }

    &--fullHeight {
        height: 100%;
    }

    //&--lastChildMargin{
    //    div:last-child{
    //        margin-bottom: 0;
    //    }
    //}

    &--overflow{
        &-hidden{
            overflow: hidden;
        }
        &-visible {
            overflow: visible;
        }
        &-scroll{
            overflow: scroll;
        }
    }

    @include setFlex();

    @include media('','xsm'){
        $mobileSizes: (
            'xxxl': 24px,
            'xxl': 24px,
            'xl': 24px,
            'lg': 24px
        );
        @include setSize(padding,padding,$mobileSizes);
    }

    //generate media classes
    $sizes:(
        0:'',
        1:xsm,
        2:sm,
        3:md,
        4:lg,
        5:xlg,
        6:''
    );
    @each $f,$from in $sizes {
        @each $t, $to in $sizes{
            @if ($f < $t) and ($from != $to){
                @include media($from,$to){
                    $fromClass: $from;
                    $toClass: $to;
                    @if $from == '' {$fromClass:'zero'}
                    @if $to == '' {$toClass:'infinite'}
                    .one-ui-media--hide-#{$fromClass}-#{$toClass}{
                        display: none;
                    }
                }

            }
        }
    }

    &--loading {
        *:not(.one-ui-loader) {
            visibility: hidden;
        }

        .one-ui-loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}