.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    text-transform: none;
    font-size: .95rem;

    > * + * {
        // Add a margin when you have multiple things within a button (such as text and an icon)
        margin-left: 10px;
    }

    &:focus, &.focus, &:active:focus, &:active.focus, &.active:focus, &.active.focus {
        outline: none;
        box-shadow: none;
    }
    &[disabled] {
      opacity: .5;
      filter: alpha(opacity=50);
    }

    &.btn-default, &.button-secondary {
        @mixin default-look {
            background-color: $ias-light-gray;
            border: 1px solid $ias-border-gray;
            color: $ias-dark-gray;
        }

        @include default-look;

        &:disabled, &.disabled {
            @include default-look;
        }

        &:hover:not(:disabled) {
            background-color: $ias-light-gray;
            border-color: $ias-blue-4;
            color: $ias-blue-2;
        }
    }

    &.btn-primary, &.button-primary {
        @mixin default-look {
            background-color: $ias-blue-2;
            border-color: $ias-blue-2;
            color: $ias-light-gray;
        }

        @include default-look;

        &:disabled, &.disabled {
            @include default-look;
        }

        &:hover:not(:disabled) {
            background-color: $ias-light-gray;
            border-color: $ias-blue-4;
            color: $ias-blue-2;
        }

        &.btn-icon {
            &:hover:not(:disabled) {
                border-color: $ias-border-gray;
            }
        }
    }

    &.ias-btn-icon, &.floating-action-button {
        min-width: auto;
        padding: 0;
        width: 30px;
        height: 30px;

        &.btn-default, &.button-secondary {
            border-color: transparent;
            background-color: transparent;
        }

        &.btn-primary {
        }

        &:hover:not(:disabled) {
            border-color: $ias-border-gray;
        }
    }
}

.btn-group {
    display: flex;
}

.pagination > li {
  &.page-item:not(.disabled) > a {
    background-color: $ias-light-gray;
    border-color: $ias-border-gray;
    color: $ias-dark-gray;

    &:hover {
      background-color: $ias-light-gray;
      border-color: $ias-blue-4;
      color: $ias-blue-2;
    }
  }
  &.page-item.disabled > a {
    background-color: $ias-light-gray;
    border-color: $ias-border-gray;
    color: $ias-dark-gray;
    filter: alpha(opacity=50);
    opacity: .5;
  }
  &.active, &.page-item.active {
    a, a:focus {
      background-color: $ias-blue-2;
      border-color: $ias-blue-2;
      box-shadow: none;
      color: $ias-white;

      &:hover, &:active {
        background-color: $ias-blue-2;
        border-color: $ias-blue-2;
        color: $ias-white;
      }
    }
  }
  &.pagination-prev > a {
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
  }
  &.pagination-next > a {
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
  }
}

.floating-action-buttons, ux-floating-action-buttons {
  .floating-action-button-list, ux-floating-action-button {
    &.left > *, &.right > * {
      margin: 0 4px;
    }

    &.top > *, &.bottom > * {
      margin: 4px 0;
    }


    .floating-action-button {
      &.button-primary {
        background-color: transparent;
        border-color: transparent;
        color: $ias-dark-gray;
      }

      &.button-secondary {
        box-shadow: none;
      }
    }

    .floating-action-button-icon{
      font-family: ias-icons, hpe-icons;
      font-size: 25px;
    }
  }
}