@use '../utils/'as *;

@import url($font-url);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*---------------------------------
	typography css start 
---------------------------------*/
:root {
    overflow: auto;
    /* or scroll */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
}

::-webkit-scrollbar {
    display: none;
    /* Webkit browsers (Chrome, Safari, Edge) */
}

.components-notice {
    margin-bottom: 20px;
    margin-top: 15px;
}

.toplevel_page_storebuild #wpcontent {
    background-color: #e9ebf7;


    .notice {
        display: none;
    }
}

.strb-settings-tab-panel{
    .strb-tab-btn:not(.active-tab):hover {
        /* background-color: rgb(52,52,52); */
        color: #333 !important;
        box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
    }

    .strb-tab-btn.active-tab {
        background-color: #333;
        color: #fff;
    }

    .strb-tab-btn{
        border: 1px solid #333;
        width: 50%;
        justify-content: center;
        font-size: 16px;
        
        &:active, &:hover{
            color: #fff;
        }
    }
}

#storebuild-admin-app {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--strb-ff-heading);
        color: var(--strb-heading-primary);
        margin-top: 0px;
        line-height: 1.2;
        @include transition(color);
    }

    a {
        text-decoration: none;

        &:focus {
            box-shadow: none;
            outline: 0;
            color: #FFFFFF;
        }
    }

    p {
        margin-top: 0;
        font-family: var(--strb-ff-p);
        font-weight: 400;
        color: var(--strb-text-body);
    }
}


button:hover {
    cursor: pointer;
}

button:focus {
    outline: 0;
}

.#{$theme-prefix}-w-img {
    & img {
        width: 100%;
    }
}


.#{$theme-prefix}-btn {
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    color: var(--strb-theme-primary) !important;
    border-radius: 6px;
    background-color: rgba($color: $theme-primary, $alpha: .07) !important;
    padding: 10px 26px;
    @extend %transition;

    &:hover {
        background-color: var(--strb-theme-primary) !important;
        color: var(--strb-common-white) !important;
    }
}

.toplevel_page_storebuild {
    .#{$theme-prefix}-btn-fill {
        display: inline-block;
        font-size: 15px;
        font-weight: 600;
        color: var(--strb-common-white);
        border-radius: 6px;
        background: var(--strb-theme-primary);
        padding: 10px 26px;
        @extend %transition;
        height: 40px;

        &:hover {
            background-color: #4618E1 !important;
            color: var(--strb-common-white) !important;
            box-shadow: 0px 6px 8px rgba(39, 20, 101, 0.2) !important;
        }

        &:focus {
            outline: none !important;
            border: none !important;
        }
    }
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-55 {
    margin-bottom: 55px;
}

.mb-30 {
    margin-bottom: 30px;
}

.pb-55 {
    padding-bottom: 55px;
}

.#{$theme-prefix}-toggle-switch {
    &:hover {
        cursor: pointer;
    }

    &.active {
        & label {
            background-color: var(--strb-theme-primary);

            &::after {
                right: 3px;
                left: 54%;
                transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
                transition-property: all;
                transition-delay: 0s;
                transition-property: left, right;
                transition-delay: .08s, 0s;
            }
        }
    }

    & span {
        font-weight: 500;
        font-size: 15px;
        color: var(--strb-common-black);

        @media #{$xs} {
            font-size: 14px;
        }

    }

    &-input {
        display: none;

        &[type="checkbox"] {
            display: none;
        }
    }

    & label {
        display: inline-block;
        width: 54px;
        height: 28px;
        border-radius: 20px;
        background-color: #CAD2EF;
        position: relative;
        margin: 0 13px;
        @extend %transition;

        @media #{$xs} {
            margin: 0 12px;
        }

        &:hover {
            cursor: pointer;
        }

        &::after {
            display: inline-block;
            position: absolute;
            content: '';
            left: 3px;
            top: 3px;
            bottom: 3px;
            right: 54%;
            border-radius: 50%;
            @include gradient((180deg, #FFFFFF 0%, #D6DCEF 100%));
            box-shadow: 1px 2px 3px rgba(18, 20, 32, 0.3);
            transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
            transition-property: all;
            transition-delay: 0s;
            transition-property: left, right;
            transition-delay: 0s, .08s;
        }
    }
}