#card-menu .tile-container .tile,
button:not([data-no-spin])[data-show-loader] {
    position: relative;
    cursor: pointer;
}

    #card-menu .tile-container .tile,
    button:not([data-no-spin])[data-show-loader]:active {
        background: #007a63;
    }

        .spinner,
        #card-menu .tile-container .tile .tile-content,
        button:not([data-no-spin])[data-show-loader] .button__text {
            transition: all 0.2s;
        }

        #card-menu .tile-container .tile.button--loading .tile-content,
        button:not([data-no-spin])[data-show-loader] .button__text {
            visibility: hidden;
            opacity: 0;
        }

        .spinner::after,
        #card-menu .tile-container .tile.button--loading::after,
        button:not([data-no-spin])[data-show-loader]::after {
            content: "";
            width: 16px;
            height: 16px;
            border: 4px solid transparent;
            border-top-color: #ffffff;
            border-radius: 50%;
            animation: button-loading-spinner 1s ease infinite;
            display: inline-block;
        }

        #card-menu .tile-container .tile.button--loading::after,
        button:not([data-no-spin])[data-show-loader]::after {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }


        #card-menu .tile-container .tile.button--loading::after {
            border-top-color: #003a5a;
        }

        #card-menu .tile-container .tile.button--loading:hover::after {
            border-top-color: #ffffff;
        }

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}