//
// Common styles for buttons
//

[class^="igz-button"], [class*="igz-button"] {
    .general-button-color-set();

    display: inline-block;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    height: 36px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    font-family: @font-family-sans-serif;
    text-transform: uppercase;
    outline: 0;
    border: 1px solid transparent;
    padding: 0 16px;
    margin: 0;

    &:hover, &:active, &:focus, &:disabled {
        outline: 0;
    }

    &.small {
        height: 32px;
    }

    &:disabled, &:disabled:hover, &:disabled:focus, &:disabled:active,
    &.disabled, &.disabled:hover, &.disabled:focus, &.disabled:active {
        box-shadow: none;
        cursor: not-allowed;
        background-color: @btn-disabled-bg-color;
        border: @btn-disabled-border;
        color: @btn-disabled-color;
    }

    &.inverted {
        background-color: @btn-inverted-bg-color;
        border: @btn-inverted-border;
        color: @btn-inverted-color;

        &:hover {
            border-color: @btn-inverted-border-color;
            color: @btn-inverted-color;
        }
    }
}

.igz-button-primary {
    .primary-button-color-set();

    color: @primary-btn-color;
    background-color: @primary-btn-bg-color;
    border: @primary-btn-border;

    &:hover, &:focus {
        background-color: @primary-btn-hover-bg-color;
        box-shadow: @primary-btn-hover-box-shadow;
        border: @primary-btn-hover-border;
    }

    &:active {
        background-color: @primary-btn-active-bg-color;
        box-shadow: @primary-btn-active-box-shadow;
        border: @primary-btn-active-border;
    }
}

.igz-button-secondary {
    .secondary-button-color-set();

    color: @secondary-btn-color;
    background-color: @secondary-btn-bg-color;
    border: @secondary-btn-border;

    &:hover, &:focus {
        background-color: @secondary-btn-hover-bg-color;
        box-shadow: @secondary-btn-hover-box-shadow;
        border: @secondary-btn-hover-border;
    }

    &:active {
        background-color: @secondary-btn-active-bg-color;
        box-shadow: @secondary-btn-active-box-shadow;
        border: @secondary-btn-active-border;
    }
}

.igz-button-remove {
    .remove-button-color-set();

    color: @remove-btn-color;
    background-color: @remove-btn-bg-color;
    border: @remove-btn-border;

    &:hover, &:focus {
        background-color: @remove-btn-hover-bg-color;
        box-shadow: @remove-btn-hover-box-shadow;
        border: @remove-btn-hover-border;
    }

    &:active {
        background-color: @remove-btn-active-bg-color;
        box-shadow: @remove-btn-active-box-shadow;
        border: @remove-btn-active-border;
    }
}

.igz-button-basic {
    .basic-button-color-set();

    color: @btn-basic-color;
    background-color: @btn-basic-bg-color;
    border: @btn-basic-border;

    &:hover, &:focus {
        background-color: @btn-basic-hover-focus-bg-color;
        box-shadow: @btn-basic-hover-focus-box-shadow;
        border: @btn-basic-hover-focus-border;
    }

    &:active {
        background-color: @btn-basic-active-bg-color;
        box-shadow: @btn-basic-active-box-shadow;
        border: @btn-basic-active-border;
    }
}

.igz-button-square-icon {
    .square-button-icon-color-set();

    font-family: 'iguazio';
    padding: 0;
    width: 38px;
    background-color: @btn-square-icon-bg-color;
    color: @btn-square-icon-color;
    border: @btn-square-icon-border;

    &:active {
        color: @btn-square-icon-active-color;
    }

    &:hover {
        color: @btn-square-icon-hover-color;
    }
}

.igz-button-just-text {
    .just-text-button-color-set();

    color: @btn-just-text-color;
    background-color: @btn-just-text-bg-color;

    &:hover, &:focus {
        box-shadow: @btn-just-text-hover-box-shadow;
        border: @btn-just-text-hover-border;
        background-color: @btn-just-text-hover-bg-color;
    }

    &:active {
        box-shadow: @btn-just-text-active-box-shadow;
        border: @btn-just-text-active-border;
        background-color: @btn-just-text-active-bg-color;
    }

    &:disabled, &:disabled:hover, &:disabled:focus, &:disabled:active,
    &.disabled, &.disabled:hover, &.disabled:focus, &.disabled:active {
        background-color: @btn-just-text-disabled-bg-color;
        border: @btn-just-text-disabled-border;
    }
}

//
// Button groups
//

.igz-grouped-buttons {
    position: relative;
    display: inline-block;
    vertical-align: middle;

    [class^="igz-button"], [class*="igz-button"] {
        border-radius: 0;
    }

    [class^="igz-button"]:first-child:not(:last-child):not(.dropdown-toggle),
    [class*="igz-button"]:first-child:not(:last-child):not(.dropdown-toggle) {
        border-radius: 3px 0 0 3px;
    }

    [class^="igz-button"]:last-child:not(:first-child),
    [class*="igz-button"]:last-child:not(:first-child) {
        border-radius: 0 3px 3px 0;
    }

    .dropdown-toggle:not(:first-child) {
        border-left: 1px solid #00b1e1;

        border-radius: 0 3px 3px 0;
    }

    .caret {
        margin: 0;
    }
}

.igz-grouped-buttons-reverse {
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
}

.igz-create-button {
    .create-button-color-set();

    display: inline-flex;
    align-items: center;
    height: 36px;
    margin-top: 7px;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: left;
    color: @create-button-color;

    &.disabled {
        color: @create-button-disabled-color;
        cursor: default;

        .igz-icon-add-round {
            color: @create-button-disabled-icon-color;
        }
    }

    .igz-icon-add-round {
        margin: 3px 8px 0 15px;
        font-size: 24px;
        color: @create-button-icon-color;
    }
}