.modal {
    & .ant-modal-close-x {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: var(--black);
        border-radius: 2px;
        background-color: var(--white);
        transition: background-color 0.3s;

        &:hover,
        &:focus {
            background-color: var(--cloud);
        }

        &:active {
            background-color: var(--borders-white);
        }

        & svg {
            width: 20px;
            height: 20px;
        }

        @media (--s-viewport) {
            width: 40px;
            height: 40px;

            & svg {
                width: 24px;
                height: 24px;
            }
        }
    }

    & .ant-modal-close {
        top: 11px;
        right: 8px;

        @media (--s-viewport) {
            top: 15px;
            right: 15px;
        }
    }
}