// Default button ion-icon sizes
.btn ion-icon {
    vertical-align: top;
    font-size: 1.4rem;
    line-height: 1;
}

.btn.btn-lg ion-icon {
    font-size: 1.7rem;
    line-height: 1;
}

.btn.btn-sm ion-icon {
    font-size: 1.3rem;
    line-height: 1;
}

//Extra small button variation
.btn.btn-xs {
    padding: .225rem 0.45rem;
    font-size: 0.875rem;

    & ion-icon {
        font-size: 1.2rem;
    }
}

// btn secondary custom text color
.btn.btn-secondary {
    color: $gray-700;
}

// btn link colors
@mixin btn-link-hover-active {
    background: $gray-200;
    border-color: $gray-200;
    text-decoration: none;
}

.btn.btn-link {
    color: $btn-link-color;

    &:hover {
        @include btn-link-hover-active;
    }
}

// btn link colors when dropdown is shown
.dropdown.show {
    > .btn.btn-link {
        @include btn-link-hover-active;
    }
}

// styling of disabled buttons
.btn.disabled {
  cursor: not-allowed;
  pointer-events: all !important;
}

// Sets primary color as primary theme variable
.btn.btn-primary,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: var(--theme-primary-color);
    color: var(--theme-primary-color-contrast);
    border-color: var(--theme-primary-color);

    &:hover {
        background: var(--theme-primary-color-variant);
    }
}

.btn-toolbar {
    margin-bottom: 10px;
}
