/* --------------------------------
    CHECKBOX 'HTML'
-------------------------------- */

.checkbox-html-container {
    --width: 20px;
    --line-width: calc(var(--width) / 5);
    --line-width: 4px;
    border-radius: 50%;
    /* background-color: rgb(230, 230, 230); */
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    transform: translateY(4px);
    /* width: fit-content; */
    /* height: fit-content; */
}

.checkbox-html-container input {
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}

.rotation-container {
    /* position: absolute; */
    display: block;
    pointer-events: none;
    width: var(--width);
    height: var(--width);
    /* transform: rotateZ(45deg); */
    rotate: 35deg;
    scale: 0.5;
    /* outline: dotted 1px chartreuse; */
    
}

.line-short, .line-long {
    position: absolute;
    border-radius: 5px;
    opacity: 1;
}

.line-short {
    background-color: rgb(138, 77, 2);
    width: calc((var(--width) + 0px ) / 2); 
    height: var(--line-width);
    bottom: 0px;
    left: calc((var(--width) + 2px) / 4);
}

.line-long {
    background-color: rgb(112, 6, 63);
    width: var(--line-width);
    height: var(--width);
    left: calc(var(--width) * 3 / 4);
}


/* --------------------------------
    OPEN WINDOW RIGHT 
-------------------------------- */
svg.open-w-right {
    stroke-width: 1; 
    stroke: rgb(140, 140, 140);
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    rotate: y 180deg;
    cursor: pointer;
}

svg.open-w-right:hover {
    stroke: black;
}


/* -----------------------------------
    X ICON, CLOSE
----------------------------------- */
.tc-icon-x {
    width: 20px;
    height: 20px;
    position: relative;
    display: block;
    margin-left: auto;
    isolation: isolate;
    cursor: pointer;
}

.tc-x-line-blue, .tc-x-line-red {
    position: absolute;
    width: 2px;
    height: 20px;
    translate: 9px;
    pointer-events: none;
}

.tc-x-line-blue {
    background: blue;
    rotate: 45deg;
}

.tc-x-line-red {
    background: red;
    rotate: -45deg;
}

.tc-x-background {
    position: absolute;
    --offs : 14px;
    height: calc(100% + var(--offs));
    width: calc(100% + var(--offs));
    opacity: 0.05;
    left: calc(var(--offs) / 2 * -1);
    top: calc(var(--offs) / 2 * -1);
    background: hotpink;
    background: rgba(207, 128, 168, 0.575);
    border-radius: 50px;
    z-index: -1;
    display: block;
}

.tc-icon-x:hover .tc-x-background {
    opacity: 0.5;
}

.tc-icon-x:hover :is(.tc-x-line-red, .tc-x-line-blue) {
    background: white;
    background: rgb(20, 20, 20);
    background: black;
}