
@import '../../../../../styles/definitions/breakpoints';
@import '../../../../../styles/definitions/colors';
@import "../../../../../styles/definitions/placeholders";

$close-icon-right: 18px;
$close-icon-width: 14px;

.modalContents {
    &_content {
        position: absolute;
        top: var(--top, 0);
        left: var(--left, 0);
        padding: 22px 20px 20px;
        background-color: $white;
        border-radius: 3px;
        padding: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        z-index: 2;

        transform: translate(var(--translatedLeft, 0), var(--translatedTop, 0)) translate(-50%, 0);

        &--centered {
            left: 50vw;
            transform: translate(-50%, 0);
        }
    }

    &_closeButton {
        position: absolute;
        top: 16px;
        right: $close-icon-right;
        
        button:focus {
            outline:0;
        }

        &Text {
            @extend %sr-only;
        }

        &Icon {
            width: $close-icon-width;
        }
    }
}