/**=====================
      Footer CSS Start
==========================**/
@use "../utils/variables" as *;

.page-wrapper {
    .page-body-wrapper {
        footer {
            margin-left: $sidebar-width;
            transition: all 0.3s ease;
            z-index: 5;
            // background-color: $primary-color;
            background-color: #F3F4F6;
            padding: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320))) calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
            position: fixed;
            bottom: 0;
            width: calc(100% - $sidebar-width);

            p {
                color: rgba($white, 0.8);
                color: #222;
                font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));

                i {
                    color: $danger-color;
                    margin-left: 5px;
                }
            }

            a {
                font-weight: 600;
            }

            &.footer-starter-kit {
                bottom: -52px;
            }

            .footer-system {
                display: flex;
                justify-content: end;

                @media (max-width: 767px) {
                    justify-content: center;
                    gap: 10px;
                    margin-top: 10px;
                }

                @media (max-width: 575.98px) {
                    display: none;
                }

                .badge-version-primary {
                    border-color: rgba($primary-color , 1) !important;
                    color: rgba($primary-color , 1);

                    body.dark & {
                        border-color: rgba($white, 0.6) !important;
                        color: rgba($white, 0.6);
                    }
                }
            }
        }
    }
}

/**=====================
      Footer CSS Ends
==========================**/