:root {
    --primary: 105, 54, 211; /* #6936D3 */
    --primary-hover: 133, 103, 255; /* #8567FF */
    --primary-active: 74, 22, 181; /* #4A16B5 */
    --base-01: 255, 255, 255; /* #FFFFFF */
    --base-02: 247, 249, 252; /* #F7F9FC */
    --base-05: 208, 212, 227; /* #D0D4E3 */
    --base-06: 177, 181, 203; /* #B1B5CB */
    --base-08: 41, 48, 77; /* #29304D */
    --base-09: 29, 36, 69; /* #1D2445 */
    --additional-color: 191, 175, 255; /* #BFAFFF */

    --text-icons-01: rgba(var(--base-09), 0.96);
    --text-icons-02: rgba(var(--base-01), 1);

    --box-shadow-01: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    --box-shadow-02: 0 0 0 4px var(--focus-border-02);
    --box-shadow-03: 0 0 0 4px var(--focus-border-03);
    --box-shadow-04: 0 0 0 4px var(--focus-border-01);

    --focus-border-01: rgba(var(--primary), 0.24);
    --focus-border-02: rgba(var(--additional-color), 0.24);
    --focus-border-03: rgba(var(--base-09), 0.24);

    --base-font-size: 18px;
    --sm-font-size: 14px;
    --border-radius: 4px;
    --disabled-opacity: 0.48;

    --gutter-x: 8px;
    --gutter-y: 8px;

    --loading-start-color: rgb(201, 204, 216); /* #c9ccd8 */
    --loading-end-color: rgba(201, 204, 216, 0.2);
}

.pay-by-banks__btn {
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    outline: none;
    width: 100%;
    height: 48px;
    padding: 10px 16px;
    border: 1px solid;
    border-radius: var(--border-radius);
    font-size: var(--base-font-size);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.36s ease-in-out;
}

.pay-by-banks__btn img {
    flex: 0 0 auto;
    max-height: 27px;
    object-fit: contain;
    margin-right: 8px;
}

.pay-by-banks__btn[data-variant='white'] {
    background-color: rgb(var(--base-01));
    border-color: rgb(var(--base-05));
    color: var(--text-icons-01);
}

.pay-by-banks__btn[data-variant='white']:hover {
    box-shadow: var(--box-shadow-01);
}

.pay-by-banks__btn[data-variant='white']:active {
    background-color: rgb(var(--base-02));
}

.pay-by-banks__btn[data-variant='white']:focus {
    box-shadow: var(--box-shadow-02);
}

.pay-by-banks__btn[data-variant='black'] {
    background-color: rgb(var(--base-09));
    border-color: rgb(var(--base-09));
    color: var(--text-icons-02);
}

.pay-by-banks__btn[data-variant='black']:hover {
    background-color: rgb(var(--base-08));
    border-color: rgb(var(--base-08));
    box-shadow: var(--box-shadow-01);
}

.pay-by-banks__btn[data-variant='black']:active {
    background-color: rgb(var(--base-09));
}

.pay-by-banks__btn[data-variant='black']:focus {
    box-shadow: var(--box-shadow-03);
}

.pay-by-banks__btn[data-variant='black']:disabled {
    background-color: rgb(var(--base-08));
    border-color: rgb(var(--base-08));
}

.pay-by-banks__btn[data-variant='purple'] {
    background-color: rgb(var(--primary));
    border-color: rgb(var(--primary));
    color: var(--text-icons-02);
}

.pay-by-banks__btn[data-variant='purple']:hover {
    background-color: rgb(var(--primary-hover));
    border-color: rgb(var(--primary-hover));
    box-shadow: var(--box-shadow-01);
}

.pay-by-banks__btn[data-variant='purple']:active {
    background-color: rgb(var(--primary-active));
    border-color: rgb(var(--primary-active));
}

.pay-by-banks__btn[data-variant='purple']:focus {
    box-shadow: var(--box-shadow-03);
}

.pay-by-banks__btn[data-variant='purple']:disabled {
    background-color: rgb(var(--primary-hover));
    border-color: rgb(var(--primary-hover));
}

.pay-by-banks__btn:disabled {
    pointer-events: none;
    opacity: var(--disabled-opacity);
}