@import '../styles/constants.less';

.reactist_button {
    cursor: pointer;
    user-select: none;
    color: inherit;
    border: none;
    background-color: transparent;
    padding: 0;

    &[aria-disabled='true'] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    &--small {
        .smaller_text();
    }

    &--primary,
    &--secondary,
    &--danger {
        .normal_text();
        box-sizing: border-box;
        padding: 5px 15px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        &.reactist_button--small {
            padding: 5px 10px;
        }
        &.reactist_button--large {
            padding: 10px 15px;
        }
    }

    &--primary {
        background-color: @primary_color;
        color: white;

        &:not([disabled]):hover {
            background-color: @primary_color_darker;
        }
    }

    &--danger {
        background-color: @color_red;
        color: white;

        &:not([disabled]):hover {
            background-color: darken(@color_red, 10%);
        }
    }

    &--secondary {
        background-color: white;
        color: @primary_font_color;
        border-color: @color_border_grey;

        &:not([disabled]):hover {
            background-color: @color_grey_9;
        }
    }

    &--link {
        color: @primary_color;
        text-decoration: none;

        &:disabled {
            color: @secondary_font_color;
        }

        &:not(:disabled):hover {
            text-decoration: underline;
        }

        &:not(&--small):not(&--large) {
            font-size: inherit;
        }
    }

    // loading-like buttons are only supported for the primary, secondary and danger variants
    &--primary,
    &--secondary,
    &--danger {
        &.reactist_button--loading {
            cursor: progress !important;
            &:after {
                background-repeat: no-repeat;
                background-size: 15px;
                content: '';
                display: inline-block;
                height: 15px;
                margin-left: 12px;
                vertical-align: middle;
                width: 15px;
                animation-duration: 1s;
                animation-iteration-count: infinite;
                animation-name: reactistRotateRight;
                animation-timing-function: linear;
                color: #ffffff;
                background-image: url('../icons/spinner.svg');
            }
        }
    }

    // we treat secondary buttons differently because the loading indicator is white
    // TODO: make the loading indicator color adaptable from the outside using SVG currentColor
    &--secondary.reactist_button--loading {
        border-color: @color_border_grey;
        background-color: @color_border_grey;
        color: @secondary_font_color;
    }
}

// Animation used by the busy state of a button
@keyframes reactistRotateRight {
    from {
        transform: rotate(0deg);
        transform-origin: center center;
    }

    to {
        transform: rotate(360deg);
        transform-origin: center center;
    }
}
