/**
 * Copyright © Resurs Bank AB. All rights reserved.
 * See LICENSE for license details.
 */

/* Widget */
#rb-ga-widget,
#rb-ga-widget * {
    box-sizing: border-box;
}

#rb-ga-widget {
    --rb-font: Arial;
    --rb-fontSize: 16px;
    --rb-green1: #3AA497;
    --rb-green2: #236161;
    display: flex;
    flex-direction: column;
    gap: 1em;
    font-family: var(--rb-font);
    font-size: var(--rb-fontSize);
    max-width: 25em;
}

/* Customer type selection. */
#rb-ga-ct-area {
    display: flex;
    gap: 1.5em;
}

#rb-ga-ct-area label {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* SSN input */
.rb-ga-ssn-area {
    display: flex;
    gap: 1em;
}

.rb-ga-ssn-area button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

#rb-ga-gov-id.error {
    border-color: #fb3b3b;
}

/* Error message element. */
#rb-ga-error {
    margin: 5px 0 0 5px;
    color: #fb3b3b;
}

/* Fetching animation. */
.rb-ga-fetch-icon {
    position: absolute;
    display: none;
    gap: 0.8em;
}

.rb-ga-fetch-icon-shard {
    --Bounce-Duration: 0.6s;
    --Shard-Size: 0.5em;
    width: var(--Shard-Size);
    height: var(--Shard-Size);
    background-color: rgb(58, 58, 58);
    border-radius: 100%;
}

.rb-ga-fetch-icon-shard:first-child {
    animation: Rb-Customer-Bounce var(--Bounce-Duration) alternate ease-in-out infinite;
}

.rb-ga-fetch-icon-shard:nth-child(2) {
    transform: translateY(0%);
    animation: Rb-Customer-Bounce-Prep calc(var(--Bounce-Duration) / 5) 0s 1 linear,
    Rb-Customer-Bounce var(--Bounce-Duration) calc(var(--Bounce-Duration) / 5)  alternate ease-in-out infinite;
}

.rb-ga-fetch-icon-shard:last-child{
    transform: translateY(100%);
    animation: Rb-Customer-Bounce-Prep calc(var(--Bounce-Duration) / 2.5) 0s 1 linear,
    Rb-Customer-Bounce var(--Bounce-Duration) calc(var(--Bounce-Duration) / 2.5)  alternate ease-in-out infinite;
}

#rb-customer-widget-getAddress-message {
    color: rgb(90 90 90);
    font-size: 0.9em;
}

@keyframes Rb-Customer-Bounce-Prep {
    100% {
        transform: translateY(-100%);
    }
}

@keyframes Rb-Customer-Bounce{
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}