@import "../../../styles/modules/importAll";

.LayerConfigMenu {
    position: 'relative';

    ul,
    ol {
        list-style: none;
    }

    .header {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 4rem;

        h2 {
            font-size: 1.1em;
            font-weight: 600;
        }
    }

    .deselectLayer {
        flex: 1;
    }

    .layerTitleContainer {
        flex: 5;
    }

    .TabMenu {
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1px solid $lightGrey;

        .tab {
            flex: 1;
        }

        .tabButton {
            text-transform: uppercase;
            width: 70%;
            margin: 0 15%;
            text-align: center;
            height: 3rem;
            color: $textPrimary;
            border-bottom: 0.1rem solid transparent;

            &:first-child {
                margin-left: 0;
                width: 85%;
            }

            &:last-child {
                margin-right: 0;
                width: 85%;
            }
        }

        .tab.active .tabButton {
            color: $anchorLinkLight;
            border-bottom: 0.1rem solid $anchorLinkLight;
        }
    }

    .tabContent {
        margin: 1rem 0;

        .ButtonRowInput, .ToggleInput {
            margin: 1.5rem 0;
        }

        h4 {
            font-weight: initial;
            color: $black;
            font-size: 1em;
        }

        hr {
            border: none;
            border-bottom: 0.1rem solid $lightBlueGrey;
            margin: 0.5rem 0;
        }
    }

    .popupTab {
        .optionContainer {
            display: flex;
            flex: 1;
            min-height: 2.5rem;
            line-height: 1.25rem;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .controlContainer {
            flex: 1;

            input {}
        }

        .columnLabelContainer {
            flex: 11;
        }
    }

    .shapeLabel {
        .label {
            font-size: inherit;
            order: 2;
        }
        .toggle {
            order: 1;
            margin-right: 0.5em;
        }
        .ToggleInput {
            margin: 0.5rem 0;
        }
    }
}