// ----------------
// -- PAGES - COMPONENT COLLAPSE OPTION STYLING ------
// ----------------
.collapse-wrapper {
    cursor: pointer;

    &:hover {
        opacity: 0.7;
    }

    label {
        cursor: pointer;
    }

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

// ------------------------------
// --- PAGES CUSTOMISATIONS
// ------------------------------
$item-size: 60px;
$item-transition: 0.2s;
$toggle-in-transition: ($item-transition*2.2);
$toggle-out-transition: ($item-transition/2);

.pages-customisation {
    position: fixed;
    top: 125px;
    left: 5px;
    z-index: 100;
    padding: 0 10px;
}

// --- PAGES CUSTOMISATIONS - INDIVIDUAL LIST ITEM
.pages-customisation {
    .pages-custom-item {
        list-style: none;
        margin-bottom: 10px;
        position: relative;
    }
    // --- PAGES CUSTOMISATIONS - TOGGLE BUTTON
    .pages-custom-toggle {
        cursor: pointer;
        text-align: center;
        padding: 0.7rem 0;
        border-radius: 10rem;
        height: $item-size;
        width: $item-size;
        background: #fff;
        position: relative;
        transition: $toggle-out-transition;
        box-shadow: 0 0 8px 8px rgba(0,0,0,0.03);
        &:hover {
            box-shadow: 0 0 8px 8px rgba(0,0,0,0.03);
        }

        .pages-custom-toggle-text {
            line-height: 0;
        }


        // --- PAGES CUSTOMISATIONS - TOGGLE BUTTON - PSUEDO ELEMENT SET UP
        &::after, &::before {
            content: '';
            position: absolute;
            right: -5px;
            visibility: hidden;
            opacity: 0;
            transition: $toggle-out-transition;
        }
        // --- PAGES CUSTOMISATIONS - TOGGLE BUTTON - BACKGROUND FADE IN
        &::after {
            background: #fff;
            left: 0;
            top: 0;
            bottom: 0;
            z-index: -1;
            border-radius: 10rem 0 0 10rem;
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
        }
        // --- PAGES CUSTOMISATIONS - TOGGLE BUTTON - SEPERATOR BAR
        &::before {
            content: '';
            background: $gray-300;
            width: 1px;
            top: 18px;
            bottom: 18px;
            z-index: 1;
        }
    }

    // --- PAGES CUSTOMISATIONS - TOOLS WRAPPER
    .options-wrap {
        position: absolute;
        background: #fff;
        top: 0;
        left: 64px;
        padding: 20px;
        width: 444px;
        transform:translate(-30px,0);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
        border-radius: 0 8px 8px 8px;
        visibility: hidden;
        opacity: 0;
        transition: $item-transition;

        // --- PAGES CUSTOMISATIONS - TOOLS WRAPPER - CLOSE BUTTON
        .option-wrap-close-button {
            position: absolute;
            top: 0;
            right: 0;
            margin: 8px;
            padding: 2px;
            display: inline-block;
            border-radius: 350px;
            font-size: 12px;
            transition: $item-transition;
            color: $gray-600;
            cursor: pointer;
            &:hover {
                background: $gray-200;
                transition: $item-transition;
            }
        }

        // --- PAGES CUSTOMISATIONS - TOOLS WRAPPER - SECTION TITLE
        label {
            display: block;
            text-align: left;
            margin-bottom: 8px;
        }

        // --- PAGES CUSTOMISATIONS - TOOLS WRAPPER - PSUEDO ELEMENT SET UP
        &::before, &::after {
            content: '';
            position: absolute;
        }
        // --- PAGES CUSTOMISATIONS - TOOLS WRAPPER - BOX LEFT HIDE
        &::before {
            background: #fff;
            height: 60px;
            width: 12px;
            left: -12px;
            top: 0;
        }
        // --- PAGES CUSTOMISATIONS - TOOLS WRAPPER - SVG CURVE
        &::after {
            background: url("/intranet/pages/image/corner.svg");
            background-size: 28px;
            width: 27px;
            height: 28px;
            top: 50px;
            left: -18.3px;
        }

        // --- PAGES CUSTOMISATIONS - TOOLS WRAPPER - INDIVIDUAL BUTTONS
        .pages-custom-options {
            display: block;
            &::after {
                content: " ";
                display: block;
                height: 0;
                clear: both;
            }
            .pages-custom-option-toggle {
                border-radius: 4px;
                font-weight: bold;
                width: 49%;
                float: left;
                & + .pages-custom-option-toggle {
                    margin-left: 2%;
                }
            }
            // --- PAGES CUSTOMISATIONS - TOOLS WRAPPER - INDIVIDUAL BUTTONS - ACTIVE
            .pages-custom-option-toggle.active {
                border: 2px solid $blue-600;
                background: $blue-100;
                opacity: 1;
                cursor: default;
            }
        }

    }
}

// ------------------------------
// --- PAGES CUSTOMISATIONS - ACTIVE

.pages-custom-item.active {
    // --- PAGES CUSTOMISATIONS - TOGGLE BUTTON - ACTIVE
    .pages-custom-toggle {
        box-shadow: none;
        transition: $item-transition;
        // --- PAGES CUSTOMISATIONS - TOGGLE BUTTON - BACKGROUND FADE IN - ACTIVE
        &::after, &::before {
            visibility: visible;
            opacity: 1;
            transition: $toggle-in-transition;
        }
    }
    // --- PAGES CUSTOMISATIONS - TOOLS WRAPPER - ACTIVE
    .options-wrap {
        visibility: visible;
        opacity: 1;
        transition: $item-transition;
        transform:translate(0);
    }
}

// Endable edit mode ui
.ui-edit-homepage {
    --pages-edit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, .1);

    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 98;

    @include respond-to(max-width, 768px) {
        display: none;
    }

    &.edit-btn .edit-page-btns {
        padding: 12px 16px;
        border-radius: 10rem;
        margin: 15px;
        box-shadow: var(--pages-edit-box-shadow);
        background: var(--theme-primary-color);


        .pages-edit-layout {
            position: relative;
            padding-right: 8px;
            margin-right: 10px;
            &::after {
                content: '';
                position: absolute;
                right: 0;
                top: -4px;
                bottom: -4px;
                background: currentColor;
                width: 1px;
                opacity: 0.3;
            }
        }


        ion-icon {
            font-size: 1.6rem;
            vertical-align: middle
        }
    }
}