@use "breakpoints";
@use "colors";
@use "typography";
@use "variables";

@use "sass:math";
.btn {
  // This selector was there to gain specificity? It doesn't work anymore
  // &:not(:disabled):not(.disabled),
  // &:not(:disabled):not(.disabled).active,
  &,&.btn-default, // replaced the "disabled" non-working to gain specificity
  &.active,
  &.btn-primary,
  &-primary.disabled,
  &-primary:disabled {
    background: none;
    @include variables.border;
    padding: math.div(variables.$spacing, 2) variables.$spacing;
    cursor: pointer;
    display: block;
    text-align: center;
    white-space: nowrap;
    @include typography.font-bold;
    @include typography.secondary-font;
    @include breakpoints.small {
      font-size: typography.$small-font;
    }
    @include breakpoints.medium-large {
      font-size: typography.$medium-font;
    }
    white-space: nowrap;
    // transition: color 400ms, border-color 400ms;

    &,
    &:link,
    &:visited {
      color: var(--textColor);
      text-decoration: none;
    }

    &--small,
    &.btn-sm {
      font-size: typography.$small-font;
      padding: math.div(variables.$spacing, 5) math.div(variables.$spacing, 2);
    }

    &--large {
      padding: variables.$spacing variables.$spacing;
      font-size: typography.$large-font;
    }

    &--disabled {
      color: colors.$active-color-dark;
    }

    &--active {
      border-style: solid;
    }
    .admin-content & {
      color: colors.$text-color-inverted;
      border-color: colors.$text-color-inverted;
    }
    .modal-dialog & {
      color: colors.$text-color-inverted;
    }
    &.loading-button-loading {
      background: colors.$greyMediumer;
      cursor: default;
    }
  }
  &:not(:disabled):not(.disabled),
  &:not(:disabled):not(.disabled).active,
  &.active {
    &:hover {
      color: colors.$hover-color;
      color: var(--text-color);
      border-color: var(--link-color);
      border-style: solid;
      text-decoration: none;
      background: colors.$bg-color-light;
    }

    &:active,
    &:focus {
      color: colors.$white;
      border-color: var(--link-color);
      border-style: solid;
      text-decoration: none;
      background: var(--link-color);
    }
  }
  &-primary.disabled,
  &-primary:disabled {
    // opacity: 0.4;
    cursor: default;
  }

  &.btn-sm {
    font-size: typography.$small-font;
    padding: math.div(variables.$spacing, 5) math.div(variables.$spacing, 2);
  }
}

.ButtonGroup {
  display: inline-flex;
  vertical-align: middle;

  .Button {
    border-left-width: 0;

    &:hover {
      border-left-color: colors.$border-color;
      border-right-color: colors.$border-color;

      &:first-child {
        border-left-color: colors.$hover-color;
        border-right-style: dashed;
      }
      &:last-child {
        border-right-color: colors.$hover-color;
        border-left-style: dashed;
      }
    }

    &--active {
      cursor: default;
      pointer-events: none;
      &:first-child {
        border-right-style: dashed;
      }
      &:last-child {
        border-left-style: dashed;
      }
    }

    &:first-child {
      border-left-width: 1px;
    }
  }
}

.btn-invisible {
  border: 0;
  padding: 0;
  background: none;
  color: var(--text-color);
}
