/*================================*/
/*    CUSTOM-MEASURE-TOOL.CSS     */
/*      KGARMIRE, 2023-11-03      */
/*================================*/

:root{
    --cmt-button-inactive-background : #c8cbce;
    --cmt-button-inactive-color : #565656;
    --cmt-button-active-background : #f9bb56;
    --cmt-button-active-color : #273b5f;
    --cmt-button-border-radius : 0;
    --cmt-total-row-background:#dfe6f1;
    --cmt-total-row-color:#273b5f;
}

.cmt{
    padding: 18px 12px;
}

/*------------ HEADER ------------*/
.cmt .header {
    display:grid;
    grid-template-columns: 1fr 32px;
    gap:8px;
}

.cmt .header h2{
    font-size: 2rem;
    font-weight: 500;
    line-height: 2rem;
    margin: 0;
}

.cmt button.close{
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.cmt button.close .material-icons{
    margin:center;
}
.cmt .header .notice{
    grid-column: span 2;
    font-size: 0.8rem;
}

/*-------- TOGGLE BUTTONS --------*/
.cmt .button-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 24px 0 8px 0;
}

.cmt button.toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 32px;
    border: none;
    border-radius: var(--cmt-button-border-radius);
    background-color: var(--cmt-button-inactive-background);
    color: var(--cmt-button-inactive-color);
    gap:12px;
    cursor: pointer;
}

.cmt button.toggle.active{
    background-color: var(--cmt-button-active-background);
    color: var(--cmt-button-active-color);
}

.cmt button.toggle svg{
    height:24px;
    width:24px;
    fill:var(--cmt-button-inactive-color);
}
.cmt button.toggle.active svg{fill:var(--cmt-button-active-color);}

/*--------- OUTPUT GRID  ---------*/
.cmt .output{
    background-color: white;
    padding:12px 0;
}

.cmt .spinner {
    width:100%;
    height:48px;
    display: flex;
}
.cmt .spinner svg {
    height:36px;
    width:36px;
    margin:auto;
}
.cmt .spinner svg circle{stroke:var(--cmt-button-active-background);}

.cmt .output .hint{text-align: center; }

.cmt .output h4 {margin: 8px 0; }
.cmt .output .grid {
    padding:4px;
    border:1px solid black;
    margin:8px 0;
}

.cmt .grid p{
    padding: 4px 8px; 
}

.cmt .grid p.total{
    background:var(--cmt-total-row-background) !important;
    color:var(--cmt-total-row-color);
}

.cmt .spinner{
    display: none; 
    margin: auto;
}

.cmt .completion-note{
    font-style: italic;
    margin-top:12px;
}
.cmt .completion-note p{
    font-size: 0.8rem;
}

.cmt button.reset{
    margin: 16px 16px 0 16px;
    width: calc(100% - 32px);

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

    min-height: 32px;
    border: none;
    border-radius: var(--cmt-button-border-radius);
    background-color: var(--cmt-button-active-background);
    color: var(--cmt-button-active-color);
    cursor: pointer;
}

/*............. POLYLINE .............*/
.cmt .polyline .grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap : 4px;
    text-align:left;
}

.cmt .polyline .grid p{margin:0px;}
.cmt .polyline .grid p:nth-child(6n-2), 
.cmt .polyline .grid p:nth-child(6n-1),
.cmt .polyline .grid p:nth-child(6n) {background: #f1f1f1; }

/*............. POLYGON ..............*/
.cmt .polygon .grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap : 4px;
    text-align:left;
}
.cmt .polygon .grid p{margin:0px; padding: 4px; }
.cmt .polygon .grid p:nth-child(4n), 
.cmt .polygon .grid p:nth-child(4n-1) {background: #f1f1f1; }

/*------------ HOVER  ------------*/
@media (hover: hover) and (pointer: fine) {
    /*Protect against click hover on touch devices;*/

    .cmt button.close:hover{background-color: rgba(0,0,0,0.1)}
    .cmt button.toggle:hover{filter: brightness(0.9);}
}