.cms-editable-block {
    position: relative;
    width: 100%;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color 120ms ease-out;
}

.cms-editable-block:hover,
.cms-editable-block:focus-within {
    outline-color: #007d7e;
}

.row > :is(.col, [class^="col-"], [class*=" col-"]) > .cms-editable-block:only-child {
    height: 100%;
}

.cms-editable-block__edit {
    position: absolute;
    z-index: 1000;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: #fff;
    background: #007d7e;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
    opacity: 0;
    transform: translateY(-0.25rem);
    transition:
        background-color 120ms ease-out,
        opacity 120ms ease-out,
        transform 120ms ease-out;
}

.cms-editable-block:hover > .cms-editable-block__edit,
.cms-editable-block:focus-within > .cms-editable-block__edit,
.cms-editable-block__edit:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

.cms-editable-block__edit:hover {
    color: #fff;
    background: #005f60;
}

.cms-editable-block__edit:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}

.cms-editable-block__edit svg {
    display: block;
    fill: currentcolor;
}

@media (hover: none) {
    .cms-editable-block__edit {
        opacity: 0.9;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cms-editable-block,
    .cms-editable-block__edit {
        transition: none;
    }
}

@media print {
    .cms-editable-block__edit {
        display: none;
    }
}