@use '../../colors';

.bz-btn {
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    padding: 0 1rem;
    min-height: 2.875rem;
    border-radius: 0.5rem;
    font-family: 'Gotham', sans-serif;
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.10);
    cursor: pointer;
    &[class*=" icon-"] {
        padding-left: 60px;
        position: relative;
        &::before {
            font-family: 'icomoon' !important;
            position: absolute;
            left: 32px;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    &--primary {
        background-color: colors.$pink-100;
        border: none;
        color: colors.$white;
        &:hover {
            background: colors.$pink-darker;
        }
    }
    &--secondary {
        background-color: colors.$white;
        border: none;
        color: colors.$pink-100;
        &:hover {
            background: colors.$pink-20;
        }
    }
    &--loading {
        position: relative;
        min-width: 56px;
        display: flex;
        align-items: center;
        span {
            color: colors.$pink-100;
            //display: none !important;
        }
        &::before {
            position: absolute;
            content: "";
            width: 24px;
            height: 24px;
            margin: auto;
            left: 0;
            right: 0;
            border: 2px solid colors.$white;
            border-bottom-color: transparent;
            border-radius: 50%;
            box-sizing: border-box;
            animation: rotation 1s linear infinite;
        }
        @keyframes rotation {
          0% {
              transform: rotate(0deg);
          }
          100% {
              transform: rotate(360deg);
          }
        }
    }
}