#donateStar-modal {
    & .modal-content {
        width: fit-content;
    }

    & .modal-dialog.modal-dialog-centered {
        justify-content: center;
    }

    & .donateStar-inner {
        gap: 24px;
    }

    & .donateStar-header {
        & img {
            width: 24px;
            height: 24px;
        }
    }

    & .donateStar-options {
        display: grid;
        grid-template-columns: repeat(3, 114px);
        gap: 6px;


        & button {
            display: flex;
            flex-direction: column;
            height: 114px;
            justify-content: center;
            align-items: center;
            gap: 7px;
            outline: 0.5px solid var(--soft-blue-transparent);
            outline-offset: -0.5px;
        }

        & button:hover
        , & button.selected {
            background-color: hsl(var(--base) / 0.125);
            outline: 2px solid hsl(var(--base));
            outline-offset: -2px;
        }

    }

    & .donateStar-action {
        & img {
            min-width: 60px;
            height: 60px;
            border: 1px solid hsl(var(--base));
        }

        & input {
            border-radius: 6px;
            height: fit-content;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 18px;
            padding-right: 10px;
            background-color: var(--soft-blue-transparent);
            font-size: var(--font-sub);
            border: none;
            outline: none !important;
            line-height: 24px;
        }

        & button {
            border-radius: 6px;
        }
    }

    & #donateStar-amount {
        color: var(--text-body) !important;
        font-weight: bold;
    }

}

[data-theme="dark"] #donateStar-modal {
    & .donateStar-balance,
    & .donateStar-options span,
    & #donateStar-amount {
        color: hsl(var(--light)) !important;
    }

}