@import '../../components/CollapsibleList.module';

.settings {
    @include flex(column, flex-start, flex-start);
    position: relative;
    color: var(--c-text-primary);
    height: 100%;
}

.options {
    @include flex(row, flex-start, center);
    @include size(100%);
    grid-gap: $grid-margin;
    margin: 0 auto;

    .tabs {
        @include flex(column, flex-end);
        margin: $grid-margin 1em 0 auto;
    }

    .separator {
        @include size(100%, 3px);
        background: var(--c-background-secondary);
        margin: ($grid-margin / 2) 0;
        border-radius: 2px;
        flex-shrink: 0;

        @include mq-phones {
            display: none;
        }
    }

    .tabButton {
        @include flex(row, center);
        @include margin-between-v(0.25em);
        @include button_middle;
        @include button_icon;
        background: var(--c-background-primary);
        color: var(--c-text-primary);
        transition: all 0.15s;
        width: 100%;

        &:hover {
            background: var(--c-background-primary-accent);
        }

        &[data-type='danger'] {
            @include focus_border(--c-red-focus);
            color: var(--c-red);

            &.active {
                background: var(--c-red);
            }
        }

        &.active {
            background: var(--c-primary);
            color: var(--c-text-secondary);
            cursor: default;
        }

        > span {
            font-size: 0.85em;
            line-height: 1em;
        }
    }

    .content {
        @include size(60%, 100%);
        position: relative;
        max-height: 100%;
        will-change: transform;
        flex-shrink: 1;
        flex-grow: 0;
        overflow: auto;

        > div {
            position: absolute;
            padding: $grid-margin;
            width: 100%;
        }

        @include mq-phones {
            width: 100%;
        }
    }

    .mobileMenu {
        display: none;

        .toggleButton {
            @include flex(row, center, center);
            @include hover_effect(--c-background-secondary);
            padding: 1em 0;
            cursor: pointer;
            z-index: 2;
            width: 100%;

            > div {
                @include size(22px, 18px);
                position: relative;
                display: inline-block;

                > div {
                    @include size(100%, 2px);
                    @include position(0, 0, 0, 0);
                    background: var(--c-text-primary);
                    transition: all 0.3s;
                    position: absolute;
                    margin: auto;

                    &:first-child {
                        top: auto;
                    }

                    &:last-child {
                        bottom: auto;
                    }
                }
            }

            &.open > div > div {
                &:first-child {
                    transform: rotate(45deg);
                    bottom: calc(50% - 1px);
                }

                &:nth-child(2) {
                    opacity: 0;
                }

                &:last-child {
                    transform: rotate(-45deg);
                    top: calc(50% - 1px);
                }
            }
        }

        .mobileList {
            @include flex(column);

            .tabButton {
                width: 100%;
                border-radius: 0;
                padding: 0.75em;
                margin: 0;
            }
        }
    }

    @include mq-phones {
        $grid-margin: $grid-margin / 2;
        flex-direction: column;
        width: 100%;

        > button {
            display: flex;
        }

        .content > div {
            padding: $grid-margin;
        }

        .tabs {
            display: none;
        }

        .mobileMenu {
            display: block;
            width: 100%;
        }
    }
}
