.mp-circle-button {
    display: grid;
    grid-template-areas: "circle-button";
    align-self: center;
    align-items: center;
    justify-content: center;
    justify-self: center;
    border: 0;
    background-color: transparent;
}

.mp-circle-button-scaling-content {
    display: grid;
    grid-area: circle-button;
    grid-template-areas: "circle-button-scaling-content";
    width: 42px;
    height: 42px;
    align-self: center;
    justify-self: center;
    align-items: center;
    justify-items: center;
}

.mp-circle-button-non-scaling-content {
    display: grid;
    grid-area: circle-button;
    grid-template-areas: "circle-button-content";
    width: 42px;
    height: 42px;
    align-self: center;
    justify-self: center;
    align-items: center;
    justify-items: center;
    z-index: 1;
}

.mp-circle-button-hover-target {
    display: grid;
    grid-area: circle-button;
    background: none;
    background-color: transparent;
    width: 54px;
    height: 54px;
    align-self: stretch;
    justify-self: stretch;
    z-index: 2;
}

.mp-circle-button-hover-target:hover ~ .mp-circle-button-scaling-content {
    transition: all .1s ease-in-out;
    transform: scale(1.35);
}

.mp-circle-button-content {
    display: grid;
    grid-area: circle-button-content;
    align-self: center;
    align-items: center;
    justify-content: center;
    justify-self: center;
}