.setting {
    margin-bottom: 1em;
    .setting-heading {
        font-size: 1.5em;
    }

    .setting-description {
        padding: 0.5em 0em;
    }
}

.settings-page {
    display: flex;
    height: 100%;
    font-family: "Inter var";

    .settings-category-container {
        width: 400px;
        height: 100%;
        background: $settings-sidebar-bg;
        overflow-y: auto;
        flex-shrink: 0;
        border-right: 2px solid #383d3f;
    }

    @media only screen and (max-width: 1000px) {
        .settings-category-container {
            display: none;
        }
    }

    .settings-category {
        display: flex;
        padding: 15px;
        border-bottom: 2px solid #444a4c;
        flex-shrink: 0;

        &:hover {
            background: $settings-category-hover-bg;
        }

        &.cat-selected {
          background: $settings-category-selected-bg;
        }

        .settings-category-icon {
            width: 40px;
            font-size: 20px;
            opacity: 0.7;
            padding-top: 3px;
            margin-right: 5px;
            text-align: center;
        }
    }

    .settings-category-content {
        width: 100%;
        height: 100%;
        padding: 50px 100px;
        overflow-y: auto;

        .settings-category-title {
            margin: 0 0 50px;
        }

        .settings-category-select {
            margin: 0 0 50px;
            display: none;
        }

        @media only screen and (max-width: 1000px) {
            .settings-category-title {
                display: none;
            }

            .settings-category-select {
                display: block;
            }
        }
    }

    @media only screen and (max-width: 1350px) {
        .settings-category-content {
            padding: 50px 30px;
        }
    }
}
