@mixin settings-btn($color, $fill: false)
    @if $fill
        color: $white
        background-color: $color
        border: 2px solid $color

        &:hover
            background-color: $white
            color: $color
    @else
        color: $color
        background-color: $white
        border: 2px solid $color

        &:hover
            background-color: $color
            color: $white

@mixin settings-log($color)
    font-size: 1rem
    font-weight: 600

    color: $white
    background-color: $black
    background-image: linear-gradient(120deg, rgba($color, 0.3), rgba($color, 0));
    //border-left: 3px solid $color
    
    
.settings-wrapper
    margin: 0
    padding: 0.5rem

    display: flex
    flex-direction: column
    gap: 0

.settings-nav
    width: 100%
    height: auto

    position: sticky
    top: 0
    left: 0

    display: flex
    flex-direction: row
    justify-content: center
    gap: 0.5rem

    background-color: $white

.settings-nav__item
    margin: 0
    padding: 0.5rem

    width: 100%
    height: 2.5rem

    display: flex
    justify-content: center
    align-items: center

    font-size: 1rem
    font-weight: 600
    text-align: center
    line-height: 1
    text-decoration: none

    border-radius: $rad

    cursor: pointer
    transition: background-color 0.2s ease, color 0.2s ease

    @include settings-btn($black)

    &:focus
        outline: none

.settings-nav__item-selected
    @include settings-btn($black, true)

.settings-list
    margin: 0
    padding: 0

    width: 100%
    height: auto

    display: flex
    flex-direction: column
    gap: 0.5rem

.log
    margin: 0
    padding: 1rem

    height: auto

    display: flex
    flex-direction: column
    gap: 0.5rem

    border-radius: $rad

    @include settings-log($critical)

@media (max-width: 450px)
    .settings-nav
        position: relative

        flex-direction: column
        gap: 0.5rem

    .settings-wrapper
        padding-bottom: 4rem