@import "../../../style/index";

.adyen-checkout__button {
    background: $color-black;
    border: 0;
    border-radius: $border-radius-medium;
    color: $color-white;
    cursor: pointer;
    font-size: $font-size-medium;
    font-weight: 500;
    height: 48px;
    margin: 0;
    padding: 15px;
    text-decoration: none;
    transition: background 0.3s ease-out, box-shadow 0.3s ease-out;
    width: 100%;

    &:focus {
        box-shadow: 0 0 0 2px $color-blue-light;
        outline: 0;
    }

    &:hover {
        background: #1c3045;
        box-shadow: 0 0, 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%);
    }

    &:active {
        background: #3a4a5c;
    }

    &:hover:focus {
        box-shadow: 0 0 0 2px $color-blue-light, 0 3px 4px rgb(0 15 45 / 20%);
    }

    &:disabled {
        &,
        &:hover {
            box-shadow: none;
            cursor: not-allowed;
            opacity: 0.4;
            user-select: all;
        }
    }

    &.adyen-checkout__button--loading {
        background: $color-gray-darker;
        box-shadow: none;
        pointer-events: none;
        user-select: none;
    }

    &.adyen-checkout__button--pay {
        margin-top: 24px;

        &:disabled {
            opacity: 0.4;
        }

        display: flex;
        justify-content: center;
    }

    &.adyen-checkout__button--standalone {
        margin-top: 0;
    }

    &.adyen-checkout__button--inline {
        display: block;
        width: auto;
        height: auto;
        padding: 10px 8px;
        font-size: 0.81em;
    }

    &.adyen-checkout__button--ghost {
        background: none;
        border: 0;
        color: $color-black;

        &:hover {
            background: $color-gray-lighter;
            box-shadow: none;
        }

        &:active {
            background: $color-gray-light;
            box-shadow: none;
        }
    }

    &.adyen-checkout__button--secondary {
        padding: 10px 12px;
        background: $color-white;
        border: 1px solid $color-black;
        color: $color-black;

        &:hover {
            background: $color-gray-lighter;
            box-shadow: 0 2px 4px rgb(27 42 60 / 20%), 0 4px 5px rgb(27 42 60 / 14%);
        }

        &:active,
        &:active:hover {
            background: $color-gray-lighter;
            box-shadow: none;
        }

        &:disabled {
            &,
            &:hover {
                box-shadow: none;
                cursor: not-allowed;
                border-color: #99a3ad;
                background-color: $color-gray-lighter;
                opacity: 0.5;
                user-select: all;
            }
        }

        .adyen-checkout__spinner {
            border-color: $color-black;
            border-top-color: transparent;
        }
    }

    &.adyen-checkout__button--action {
        padding: 10px 12px;
        background: rgb(0 102 255 / 10%);
        border: 1px solid transparent;
        color: $color-blue;

        &:hover {
            background: rgb(0 102 255 / 20%);
            box-shadow: none;
        }

        &:active,
        &:active:hover {
            background: rgb(0 102 255 / 30%);
            box-shadow: none;
        }
    }

    &.adyen-checkout__button--link {
        background: transparent;
        border: 1px solid transparent;
        color: $color-blue;
        font-weight: 400;
        border-radius: $border-radius-small;
        padding: 2px;

        &:hover {
            background: transparent;
            text-decoration: underline;
            box-shadow: none;
        }
    }

    &.adyen-checkout__button--completed {
        &,
        &:hover,
        &:active,
        &:active:hover {
            background: $color-green;
            color: $color-white;
        }

        .adyen-checkout__button__icon {
            filter: brightness(0) invert(1);
        }
    }

    &__content {
        height: 100%;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    &__icon {
        margin-right: 12px;

        [dir="rtl"] & {
            margin-right: 0;
            margin-left: 12px;
        }
    }

    &__text {
        display: block;
        justify-content: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .adyen-checkout__spinner {
        border-color: $color-white;
        border-top-color: transparent;
    }
}
