.teacherControlOptions-container {
    cursor: pointer;
}

.teacherControlOptions-container:hover, .teacherControlOptions-container[aria-active="true"] {
    background-color: #F0F2F5;
}

.teacherControlOptions-container:hover span.point, .teacherControlOptions-container[aria-active="true"] span.point {
    background-color: #0362DD;
}

.teacherControlOptions-options-points {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.teacherControlOptions-options {
    width: 100%;
    background-color: white;
    bottom: 0;
    left: 0;
    translate: 0 100%;
    border-radius: 0 0 8px 8px;
    display: none;
    cursor: pointer;
    border: 4px solid #F0F2F5;
}

.teacherControlOptions-options[aria-active="true"] {
    display: block;
}

.teacherControlOptions-options-points > span.point {
    --size: 4px;
    
    height: var(--size);
    width: var(--size);
    background-color: black;
    border-radius: 100%;
}

.teacherControlOptions-options > p {
    padding: 20px 18px;
    border-bottom: 2px solid #F0F2F5;
}

.teacherControlOptions-options > p:hover {
    background-color: #F0F2F5;
}

.teacherControlOptions-options > p:last-child {
    border-radius: 0 0 8px 8px;
    border-bottom: none;
}