// Store dark theme related color changes

.dark {
    background: $darklow !important;
    transition: 0.2s ease;

    // Navbar colors
    .navbar__container {
        .navbar__content {
            .navbar__content--collapsed, .navbar__content--expanded {
                background: $darkhigh !important;

                .navbar-right {
                    .link-each {
                        @apply border-gray-700;

                        &:hover {
                            transition: 150ms ease-in;
                            background: $darklow;
                          }
                    }
                }
            }
        }
    }

    // Static content
    .static__container {
        color: $textcolor !important;
        
        .content {
            ::v-deep h1,
            ::v-deep h2,
            ::v-deep h3,
            ::v-deep h4 {
                color: white !important;
            }

            ::v-deep p,
            ::v-deep li {
                color: $textcolor !important;
            }

            ::v-deep blockquote {
                p {
                    color: $darklow !important;
                }
            }
        }
    }

    // Footer
    .footer__container {
        .footer__content {
            .footer--text {
                color: white !important;
                border-color: $textcolor;
            }

            .footer--extra {
                color: $textcolor !important;
            }
        }
    }

    // Utility
    .shadow-cust {
        $color: $darkhigh;
        -webkit-box-shadow: 8px 8px 40px 3px $color;
        -moz-box-shadow: 8px 8px 40px 3px $color;
        box-shadow: 8px 8px 40px 3px $color;
    }

    // Search bar
    .search-bar__container {
        .search--box {
            background: $darkhigh;

            input {
                caret-color: white;
                color: white;
            }
        }
    }

    // Home page
    .home__container {
        .top__container {
            h1 {
                color: $lightcyan !important;
            }
        }

        .start-btn-content {
            .github--btn {
                color: white !important;

            }
        }
    }

    .details__container {
        .details--content {
            .line--icon {
                .icon {
                    fill: $darklow !important;
                }
            }

            .text--content {
                .details--each {
                    h3 {
                        @apply text-gray-300;
                    }
                }
            }
        }
    }

    // Format
    .format--option__container {
        .format--option {
            background: $darkblue !important;
            color: $lightcyan !important;

            &:hover {
                background: lighten($darkblue, 5) !important;
              }
        }
    }

    // Manual metadata
    .manual--each__container {
        input {
            background: $darkhigh !important;
            border-color: $mediumblue !important;
            caret-color: white;

            &:hover {
                border-color: $lightblue !important;
            }
        }
    }

    // Modal
    .modal__container {
        background-color: lighten($darkhigh, 5) !important;

        .modal__header {
            @apply text-gray-400;
            @apply border-gray-700;
        }
    }
}