.indicator {
    flex: 0 0 auto;
    display: inline-block;
    opacity: 0;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    background-position: center;
    /* background-size: contain; */
    background-repeat: no-repeat;
    transition: opacity 0.3s ease;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.indicator-label {
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
    color: #666;
    transition: opacity 0.3s ease;
}

.indicator-label.show {
    opacity: 1;
}
.indicator-label.valid {
    opacity: 1;
}
.indicator-label.invalid {
    opacity: 1;
}

.indicator.valid {
    opacity: 1;
    background-image: url('/img/gui/check.png');
}

.indicator.invalid {
    opacity: 1;
    background-image: url('/img/gui/cross.png');
}

.indicator.show {
    opacity: 1;
}

.indicator.checking {
    opacity: 1;
    border: 3px solid #AAA;
    border-bottom-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotation 0.5s linear infinite;
}

.indicator.credit-card {
    width:50px;
    height:30px;
    /* border: 1px solid #ccc; */
    /* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); */
    /* background-color: var(--accent-dark); */
}

.indicator-wrapper {
    opacity: 0;
}

.indicator-wrapper .indicator {
    transition: opacity none;
}

.indicator-wrapper:has(.indicator.show, .indicator.valid) {
    transition: opacity 0.3s ease;
    opacity: 1;
}

.indicator-wrapper.credit-card {
    background: var(--accent-gradient);
    border-radius: 3px;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}