$top-adult-above: 9.8%;
$top-adult-below: 80.5%;
$top-child-above: 31.5%;
$top-child-below: 58%;

.odontogram-wrap {
    position: relative;
    .teeth-content {
        .teeth {
            cursor: pointer;
            position: absolute;
            width: 5.25%;
            height: 9%;
            z-index: 100;
            border-radius: 6px;
            transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
            // background: rgba($color: yellow, $alpha: 0.5);

            &:hover {
                background: rgba(47, 111, 219, 0.12);
                box-shadow: 0 0 0 1px rgba(47, 111, 219, 0.35), 0 2px 8px rgba(15, 23, 42, 0.18);
                transform: scale(1.03);
                z-index: 330;
            }

            &.teeth--active {
                background: rgba(15, 118, 110, 0.14);
                box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.55), 0 3px 12px rgba(15, 23, 42, 0.22);
                z-index: 340;
            }

            .tooth-option-label {
                position: absolute;
                top: 106%;
                left: 50%;
                transform: translateX(-50%);
                min-width: 18px;
                padding: 1px 4px;
                border: 1px solid #2f6fe0;
                background: #fff;
                color: #1f4fb3;
                font-size: 9px;
                font-weight: 700;
                line-height: 1.1;
                text-align: center;
                border-radius: 2px;
                white-space: nowrap;
                z-index: 320;
            }

            .tooth-option-label--lower {
                top: auto;
                bottom: 106%;
                transform: translateX(-50%) rotate(180deg);
            }
        }
        .rotate {
            transform: rotate(180deg);

            &:hover {
                transform: rotate(180deg) scale(1.03);
            }

            &.teeth--active {
                transform: rotate(180deg);
            }
        }
        .adult-above {
            .t-18 {
                top: $top-adult-above;
                left: 0.5%;
            }
            .t-17 {
                top: $top-adult-above;
                left: 6.8%;
            }
            .t-16 {
                top: $top-adult-above;
                left: 13.1%;
            }
            .t-15 {
                top: $top-adult-above;
                left: 19.3%;
            }
            .t-14 {
                top: $top-adult-above;
                left: 25.5%;
            }
            .t-13 {
                top: $top-adult-above;
                left: 31.8%;
            }
            .t-12 {
                top: $top-adult-above;
                left: 38.1%;
            }
            .t-11 {
                top: $top-adult-above;
                left: 44.3%;
            }
            .t-21 {
                top: $top-adult-above;
                left: 50.5%;
            }
            .t-22 {
                top: $top-adult-above;
                left: 56.8%;
            }
            .t-23 {
                top: $top-adult-above;
                left: 63.1%;
            }
            .t-24 {
                top: $top-adult-above;
                left: 69.4%;
            }
            .t-25 {
                top: $top-adult-above;
                left: 75.6%;
            }
            .t-26 {
                top: $top-adult-above;
                left: 81.8%;
            }
            .t-27 {
                top: $top-adult-above;
                left: 88.1%;
            }
            .t-28 {
                top: $top-adult-above;
                left: 94.1%;
            }
        }
        .adult-below {
            .t-48 {
                top: $top-adult-below;
                left: 0.5%;
            }
            .t-47 {
                top: $top-adult-below;
                left: 6.8%;
            }
            .t-46 {
                top: $top-adult-below;
                left: 13%;
            }
            .t-45 {
                top: $top-adult-below;
                left: 19.2%;
            }
            .t-44 {
                top: $top-adult-below;
                left: 25.4%;
            }
            .t-43 {
                top: $top-adult-below;
                left: 31.8%;
            }
            .t-42 {
                top: $top-adult-below;
                left: 37.8%;
            }
            .t-41 {
                top: $top-adult-below;
                left: 44%;
            }
            .t-31 {
                top: $top-adult-below;
                left: 50.5%;
            }
            .t-32 {
                top: $top-adult-below;
                left: 56.8%;
            }
            .t-33 {
                top: $top-adult-below;
                left: 63.1%;
            }
            .t-34 {
                top: $top-adult-below;
                left: 69.4%;
            }
            .t-35 {
                top: $top-adult-below;
                left: 75.4%;
            }
            .t-36 {
                top: $top-adult-below;
                left: 81.8%;
            }
            .t-37 {
                top: $top-adult-below;
                left: 88.2%;
            }
            .t-38 {
                top: $top-adult-below;
                left: 94.3%;
            }
        }
        .child-above {
            .t-55 {
                top: $top-child-above;
                left: 19.2%;
            }
            .t-54 {
                top: $top-child-above;
                left: 25.5%;
            }
            .t-53 {
                top: $top-child-above;
                left: 31.5%;
            }
            .t-52 {
                top: $top-child-above;
                left: 37.8%;
            }
            .t-51 {
                top: $top-child-above;
                left: 44.1%;
            }

            .t-61 {
                top: $top-child-above;
                left: 50.4%;
            }
            .t-62 {
                top: $top-child-above;
                left: 56.7%;
            }
            .t-63 {
                top: $top-child-above;
                left: 63%;
            }
            .t-64 {
                top: $top-child-above;
                left: 69.3%;
            }
            .t-65 {
                top: $top-child-above;
                left: 75.6%;
            }
        }
        .child-below {
            .t-85 {
                top: $top-child-below;
                left: 19.2%;
            }
            .t-84 {
                top: $top-child-below;
                left: 25.5%;
            }
            .t-83 {
                top: $top-child-below;
                left: 32%;
            }
            .t-82 {
                top: $top-child-below;
                left: 37.8%;
            }
            .t-81 {
                top: $top-child-below;
                left: 44.1%;
            }

            .t-71 {
                top: $top-child-below;
                left: 50.4%;
            }
            .t-72 {
                top: $top-child-below;
                left: 56.7%;
            }
            .t-73 {
                top: $top-child-below;
                left: 63%;
            }
            .t-74 {
                top: $top-child-below;
                left: 69.3%;
            }
            .t-75 {
                top: $top-child-below;
                left: 75.6%;
            }
        }
    }
}