* {
    padding: 0rem;
    margin: 0rem;
    box-sizing: border-box;
    font-family: $font-family;
    font-size: 16px;
}
:root {
    --primary-color: #{$primary-clr};
    --secondary-color: #{$secondary-clr};
    --bg-primary-color: #{$bg-primary-clr};
    --bg-secondary-color: #{$white};
    --text-primary-color: #{$text-primary-clr};
    --text-secondary-color: #{$text-secondary-clr};
}

:root.dark-theme {
    --primary-color: #{$dark-primary-clr};
    --secondary-color: #{$dark-secondary-clr};
    --bg-primary-color: #{$dark-primary-bg-clr};
    --bg-secondary-color: #{$dark-secondary-bg-clr};
    --text-primary-color: #{$dark-text-primary-clr};
    --text-secondary-color: #{$dark-text-secondary-clr};
    .element {
        img {
            filter: invert(99%) sepia(76%) saturate(2%) hue-rotate(131deg) brightness(114%) contrast(100%) !important;
        }
    }
    .avatars__container {
        &::after {
            background: linear-gradient(270deg, rgba(24, 25, 26, 1) 0%, rgba(255, 255, 255, 0) 100%) !important;
        }
    }
    .input__room {
        img {
            filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(43deg) brightness(102%) contrast(101%);
        }
    }
}
.luca-body {
    direction: CHROME_CSS_DIR;
}
.container {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary-color);
    width: 600px;
    height: 380px;
    position: relative;
}
.inner__container {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0rem 2rem;
}

.popup__container {
    position: absolute;
    background-color: var(--bg-secondary-color);
    transition: $transition-300;
    margin: 0 auto;
    top: 50%;
    chrome_css_start: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    height: 0px;
    width: 0px;
    border-radius: $radius;
}
.modal--active {
    height: 80%;
    width: 80%;
}
.modal--fade {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #272e5725;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: $transition-300;
}
.fade--active {
    opacity: 1;
    visibility: visible;
}

.input__container {
    display: flex;
    flex-direction: column;
    width: 80%;
    input {
        background-color: var(--bg-secondary-color);
        color: var(--secondary-color);
        border-radius: $radius;
        border: none;
        padding: 0.6rem;
        width: 100%;
        &:focus-visible {
            outline: none;
        }
    }

    .input__room {
        display: flex;
        align-items: center;
        background-color: var(--bg-secondary-color);
        border-radius: $radius;
        padding: 0rem 1rem;
    }
    .user__input {
        input {
            padding: 0.4rem !important;
            font-size: 14px;
        }
    }
}

.page__container {
    flex: 1;
    height: fit-content;
    margin-top: 1rem;
}
.page__header {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--secondary-color);
}
.page__pargraph {
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--text-primary-color);
}
.page__content {
    gap: 0.5rem;
    h1 {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--secondary-color);
    }
    p {
        font-size: 0.6rem;
        font-weight: 400;
        color: var(--text-primary-color);
    }
}
.page__actions {
    position: absolute;
    bottom: 2rem;
    chrome_css_end: 2rem;
}
.page__memebers {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr));
    gap: 1rem;
    max-height: 10rem;
    min-width: 100%;
    max-width: 100%;
    overflow-y: scroll;
}
.inactiveMixin {
    content: "";
    position: absolute;
    display: block;
}

.beforeAnimation {
    transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
}

.afterAnimation {
    transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
}

// Mobile Toggle Switch
.toggleWrapper {
    input {
        &.mobileToggle {
            opacity: 0; // hides checkbox
            position: absolute;
            & + label {
                position: relative;
                display: inline-block;
                user-select: none;
                transition: $transition-300;
                height: 23px;
                width: 50px;
                background-color: var(--bg-secondary-color);
                border-radius: $radius * 100;
                &:before {
                    @extend .inactiveMixin;
                    @extend .beforeAnimation;
                    height: 23px;
                    width: 50px;
                    top: 0;
                    chrome_css_start: 0;
                    border-radius: $radius * 100;
                }
                &:after {
                    @extend .inactiveMixin;
                    @extend .afterAnimation;
                    background-color: var(--text-primary-color);
                    height: 18px;
                    width: 18px;
                    top: 2px;
                    chrome_css_start: 4px;
                    border-radius: $radius * 100;
                }
            }
            // When Active
            &:checked {
                & + label:before {
                    background: $primary-clr; // Active Color
                    opacity: 0.2;
                    transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
                }
                & + label:after {
                    chrome_css_start: 54px - 25px;
                    background-color: $primary-clr;
                }
            }
        }
    }
}

/** Used to define container behavior: width, position: fixed etc... **/
.Toastify__toast-container {
}

/** Used to define the position of the ToastContainer **/
.Toastify__toast-container--top-left {
}
.Toastify__toast-container--top-center {
}
.Toastify__toast-container--top-right {
}
.Toastify__toast-container--bottom-left {
}
.Toastify__toast-container--bottom-center {
}
.Toastify__toast-container--bottom-right {
}

/** Classes for the displayed toast **/
.Toastify__toast {
}
.Toastify__toast--rtl {
}
.Toastify__toast-body {
    div:last-child {
        font-size: 0.8rem !important;
    }
}

/** Used to position the icon **/
.Toastify__toast-icon {
}

/** handle the notificaiton color and the text color based on the theme **/
.Toastify__toast-theme--dark {
}
.Toastify__toast-theme--light {
}
.Toastify__toast-theme--colored.Toastify__toast--default {
}
.Toastify__toast-theme--colored.Toastify__toast--info {
}
.Toastify__toast-theme--colored.Toastify__toast--success {
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
}
.Toastify__toast-theme--colored.Toastify__toast--error {
}

.Toastify__progress-bar {
}
.Toastify__progress-bar--rtl {
}
.Toastify__progress-bar-theme--light {
}
.Toastify__progress-bar-theme--dark {
}
.Toastify__progress-bar--info {
}
.Toastify__progress-bar--success {
}
.Toastify__progress-bar--warning {
}
.Toastify__progress-bar--error {
}
/** colored notifications share the same progress bar color **/
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
}

/** Classes for the close button. Better use your own closeButton **/
.Toastify__close-button {
}
.Toastify__close-button--default {
}
.Toastify__close-button > svg {
}
.Toastify__close-button:hover,
.Toastify__close-button:focus {
}
