// Offcanvas styles for dark theme
@mixin dark-theme-offcanvas {
    .offcanvas-content  {
        background-color: $dark;
        color: $light;

        .btn-close::after,
        .btn-close::before {
            background-color: $light !important;
        }
    }
}

// Offcanvas styles for light theme
@mixin light-theme-offcanvas {
    .offcanvas-content {
        background-color: $light;
        color: $dark;

        .btn-close::after,
        .btn-close::before {
            background-color: $dark !important;
        }
    }
}


// Base offcanvs styles
.offcanvas {
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: all $base-transition-time ease;

    // Hidden by default
    visibility: hidden;

    // Apply light theme as a default theme
    @include light-theme-offcanvas;

    // Offcanvas content styles
    .offcanvas-content {
        max-width: 400px;
        min-width: 300px;
        height: 100vh;
        margin: 0 $base-margin 0 0;
        transition: all $base-transition-time ease-out;

        // Offcanvas header styles
        .offcanvas-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            padding: $base-padding;
        }

        // Offcanvas body styles
        .offcanvas-body {
            padding: $base-padding;
        }
    }

    // Disable the background color if the object has data-scroll="true"
    &[data-scroll="true"] {
        background-color: transparent !important;
        width: auto !important;
        height: auto !important;
    }

    // Offcanvas content positioning styles
    &.offcanvas-left {
        display: flex;
        justify-content: start;

        // Offcavas content positioning styles
        .offcanvas-content {
            margin: 0 $base-margin 0 0 !important;
            transform: translateX(-100%);
        }
    }

    &.offcanvas-right {
        display: flex;
        justify-content: end;

        // Offcavas content positioning styles
        .offcanvas-content {
            margin: 0 0 0 $base-margin;
            transform: translateX(100%);
        }
    }

    &.offcanvas-top {
        display: flex;
        align-items: start;
        justify-content: start;

        // Offcavas content positioning styles
        .offcanvas-content {
            width: 100vw;
            max-width: 100vw;
            min-height: 300px;
            max-height: 400px;
            transform: translateY(-100%);

            margin: 0 0 $base-margin 0;
        }
    }

    &.offcanvas-bottom {
        display: flex;
        align-items: end;
        justify-content: start;

        // Offcavas content positioning styles
        .offcanvas-content {
            width: 100vw;
            max-width: 100vw;
            min-height: 300px;
            max-height: 400px;
            transform: translateY(100%);

            margin: $base-margin 0 0 0;
        }
    }

    // Styles for the shown offcanvas
    &.show {
        visibility: visible;
        background-color: $darken-screen-bg-color;

        .offcanvas-content.show {
            transform: translate(0, 0) !important;
            opacity: 1 !important;
        }
    }
}


// Apply different theme styles
body[data-theme="dark"] {
    @include dark-theme-offcanvas;
}

body[data-theme="light"] {
    @include light-theme-offcanvas;
}

.offcanvas[data-theme="dark"] {
    @include dark-theme-offcanvas;
}

.offcanvas[data-theme="light"] {
    @include light-theme-offcanvas;
}