$shadowColor: rgba(0, 0, 0, 0.17);
$dustyOrange: #ee6931;
$pineGreenFull: #08322b;
$pineGreenMedium: rgba(8, 50, 43, 0.86);
$pineGreenLow: rgba(8, 50, 43, 0.65);
$greyBlue: #80babe;

$lato: "Lato";
$montserrat: "Montserrat", sans-serif;
$openSans: "Open Sans", sans-serif;

$mobileBreak: 480px;

@import url('https://fonts.googleapis.com/css?family=Open+Sans');


.map-wrapper{
    height:800px;
    display:flex;
    width:100%;
    overflow:hidden;
}

.map-svg{
    max-width:calc(100% - 225px);
    height:100%;
    overflow:auto;
    border:1px solid #ccc;

}


.map-controls{
    display:flex;
    flex-direction: column;
    width:225px;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    overflow:hidden;
    align-self:flex-start;
    box-sizing:border-box;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    >button{
        font-family: 'Open Sans', 'Arial';
        box-sizing:border-box;
        padding:10px;
        color:$pineGreenMedium;
        box-sizing:border-box;
        font-size:12px;
        border-top:none;
        border-right:none;
        border-left:none;
        background:#fafafa;
        border-bottom:1px solid #ccc;
        outline:none;
    overflow:hidden;

        &:hover{
            background-color:#ececec;
            cursor:pointer;
        }
    }
}

.color-picker{
    display:none;
    &.open{
        display:block;
    }
    border-bottom:1px solid #ccc;
    .chrome-picker{
        box-shadow: none !important; //3rd party override
    }
}

.width-picker{
    display:none;
    &.open{
        display:flex;
    }
    height:80px;
    width:100%;
    box-sizing:border-box;
    padding:10px;
    align-items:center;
    justify-content: center;
    flex-direction: column;
    border-bottom: 1px solid #ccc;

    span{
        font-size:14px;
        color:$pineGreenMedium;
        font-weight:bold;
        margin-bottom:10px;
    }
    .slider{
        width:100%;
        border-radius:4px;
        height:10px;
        background-color:#fafafa;
        border:1px solid #bababa;
        box-sizing:border-box;
        display:flex;
        align-items:center;
    }
    .handle{
        border-radius:50%;
        height:20px;
        width:20px;
        background-color:#bababa;
        cursor:grab;
    }
}

.icons-wrapper{
    display:none;
    flex-direction: column;
    padding:10px;
    box-sizing:border-box;
    width:100%;
    border-bottom: 1px solid #ccc;
    &.open{
        display:flex;
    }
    .icons-select{
        font-family: 'Open Sans', 'Arial';
        font-size:12px;
        color:$pineGreenMedium;
        align-self:center;
    }
    .add-icon{
        display:flex;
        align-items:center;
        input{
            height:24px;
            margin-right:5px;
            border-radius:2px;
            min-width:0;
            border:1px solid #ccc;
            box-sizing:border-box;
            width:100%;
        }
        button{
            height:24px;
            display:flex;
            align-items:center;
            border:1px solid #ccc;
        }
    }
}

.tags-wrapper{
    display:none;
    flex-direction: column;
    padding:10px;
    box-sizing:border-box;
    width:100%;
    border-bottom: 1px solid #ccc;
    &.open{
        display:flex;
    }
    .tags-select{
        font-family: 'Open Sans', 'Arial';
        font-size:12px;
        color:$pineGreenMedium;
        align-self:center;
    }

    .add-tag{
        display:flex;
        align-items:center;
        input{
            height:24px;
            margin-right:5px;
            border-radius:2px;
            min-width:0;
            border:1px solid #ccc;
            box-sizing:border-box;
        }
        button{
            height:24px;
            display:flex;
            align-items:center;
            border:1px solid #ccc;
        }
    }

    .tag{

        background-color:rgb(18, 90, 18);
        box-sizing: border-box;
        display:flex;
        border-radius:4px;
        align-self: flex-start;
        overflow:hidden;
        margin-bottom:5px;
        .name{
            padding:5px 10px;
            color:white;
            font-family: 'Open Sans', 'Arial';
            font-size:12px;
        }
        .close{
            padding:5px;
            background-color:rgb(15, 71, 15);
            color:white;
            font-family: 'Open Sans', 'Arial';
            font-size:12px;
            display:flex;
            align-items:center;
            cursor:pointer;
            justify-content: center;
            border:none;
            outline:none;
            &:hover{
                background-color:rgb(12, 58, 12);
            }
        }
    }
}

.tag + .add-tag{
    margin-top:20px;
}

.svg-icon{
    cursor:grab;
}