/* Demo */
.box-selector-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0.5rem;
    row-gap: 0.5rem;

    height: 8rem;
    width: 8rem;
}

.box-selector {
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

.box-selector--selected {
    border: 2px solid #3b82f6;
    position: relative;

    &:before {
        content: '';
        left: 0.25rem;
        position: absolute;
        top: 0.25rem;

        height: 1rem;
        width: 1rem;

        background-image: url("data:image/svg+xml,%3Csvg fill='%233b82f6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E");
        background-position: center center;
        background-repeat: no-repeat;
    }
}