// .PeriodicTableElementHtml {
//     border: 1px solid #646a6a;
//     position: relative;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     flex-direction: column;
//     user-select: none;
//     background: #212424;
//     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
// }

// .PeriodicTableElementHtml_Number {
//     position: absolute;
//     opacity: 0.6;
//     line-height: 1em;
// }

// .PeriodicTableElementHtml_Symbol {
//     position: absolute;
//     width: 100%;
//     text-align: center;
//     line-height: 1em;
//     font-weight: 500;
// }

// .PeriodicTableElementHtml_Label {
//     position: absolute;
//     width: 100%;
//     display: block;
//     line-height: 1em;
//     text-align: center;
//     opacity: 0.6;
// }

.PeriodicTableElement_Frame {
    stroke-width: 1px;
    stroke: #646a6a;
    fill: $bg-color;
    &--chart {
        cursor: pointer;
        &:hover {
            stroke: #eee;
        }
    }
}

.PeriodicTableElement_Shadow {
    fill: rgba(0, 0, 0, 0.35);
}

.PeriodicTableElement_Number {
    position: absolute;
    opacity: 0.6;
    pointer-events: none;
    fill: white;
}

.PeriodicTableElement_Symbol {
    @include font-bold;
    pointer-events: none;
    color: $active-color;
}

.PeriodicTableElement_Label {
    opacity: 0.6;
    fill: white;
    pointer-events: none;
}

.ToolPairing__HeatMapChart__PeriodicElement .PeriodicTableElement_Frame {
    stroke: $bg-color;
}

.ToolPairing__HeatMapChart__PeriodicElement .PeriodicTableElement_Symbol {
    fill: black(0.7);
}

.ToolPairing__HeatMapChart__PeriodicElement .PeriodicTableElement_Number,
.ToolPairing__HeatMapChart__PeriodicElement .PeriodicTableElement_Label {
    fill: $bg-color;
}
