/*
 * Button-specific utilities
 */
@mixin gl-tmp-button-hover($border-color, $background-color) {
  box-shadow: inset 0 0 0 $gl-border-size-2 $border-color,
    0 $gl-border-size-2 $gl-border-size-2 0 rgba(0, 0, 0, 0.08);
  background: $background-color;
}

.gl-button {
  @include gl-display-inline-flex;
}

.gl-button:not(.btn-link) {
  &:focus,
  &:active,
  &:focus:active {
    @include gl-text-decoration-none;
  }
}

.gl-button.gl-button,
.gl-button.gl-button.btn-block {
  @include gl-border-0;
  @include gl-py-3;
  @include gl-px-4;
  @include gl-bg-transparent;
  @include gl-line-height-normal;
  @include gl-text-gray-900;
  @include gl-fill-current-color;
  @include gl-inset-border-1-gray-200;
  @include gl-justify-content-center;
  @include gl-align-items-center;
  @include gl-font-base;
  @include gl-rounded-base;

  .gl-button-text {
    @include gl-overflow-hidden;
    @include gl-text-overflow-ellipsis;
    @include gl-white-space-nowrap;
    // Added to address a FF bug which causes cut off text: https://bugzilla.mozilla.org/show_bug.cgi?id=1406552
    padding-top: 1px;
    padding-bottom: 1px;
    margin-top: -1px;
    margin-bottom: -1px;
  }

  .gl-button-icon {
    @include gl-h-5;
    @include gl-w-5;
    @include gl-flex-shrink-0;
    @include gl-mr-2;
    top: auto;
  }

  gl-emoji {
    @include gl-mr-2;
    position: relative;
    @include gl-font-lg;
  }

  &.btn-default,
  &.btn-dashed {
    @include gl-bg-white;

    &.btn-default-tertiary {
      @include gl-bg-transparent;
    }

    &:hover {
      @include gl-tmp-button-hover($gray-400, $gray-50);

      .gl-icon {
        @include gl-text-gray-700;
      }
    }

    &:focus {
      @include gl-focus($color: $gray-400);
      @include gl-bg-gray-50;

      .gl-icon {
        @include gl-text-gray-700;
      }
    }

    &:active,
    &.active {
      @include gl-focus($color: $gray-600);
      @include gl-bg-gray-100;

      .gl-icon {
        @include gl-text-gray-900;
      }

      &:focus {
        @include gl-focus($color: $gray-600);
      }

      &:focus .gl-icon {
        @include gl-text-gray-900;
      }
    }

    .gl-icon {
      @include gl-text-gray-500;
    }
  }

  &.selected {
    @include gl-bg-white;
    box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;

    &:hover,
    &:focus {
      @include gl-bg-gray-50;
    }

    &:hover {
      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400;
    }

    &:focus {
      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400, $focus-ring;
    }

    &:active,
    &:active:focus {
      @include gl-bg-gray-100;
      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-600, $focus-ring;
    }
  }

  &.btn-confirm,
  &.btn-info,
  &.btn-success,
  &.btn-danger {
    @include gl-text-contrast-light;
  }

  &.btn-confirm,
  &.btn-info {
    @include gl-bg-blue-500;
    @include gl-inset-border-1-blue-600;

    &:hover {
      @include gl-tmp-button-hover($blue-800, $blue-600);
    }

    &:focus {
      @include gl-focus($color: $blue-800);
      @include gl-bg-blue-600;
    }

    &:active,
    &.active {
      @include gl-focus($color: $blue-900);
      @include gl-bg-blue-700;

      &:focus {
        @include gl-focus($color: $blue-900);
      }
    }
  }

  &.btn-confirm-secondary,
  &.btn-confirm-tertiary,
  &.btn-info-secondary,
  &.btn-info-tertiary {
    @include gl-bg-transparent;
    @include gl-text-blue-500;
    @include gl-font-weight-normal;
    @include gl-inset-border-1-blue-500;

    &:hover {
      @include gl-text-blue-700;
      @include gl-tmp-button-hover($blue-700, $blue-50);
    }

    &:focus {
      @include gl-text-blue-700;
      @include gl-focus($color: $blue-700);
      @include gl-bg-blue-50;
    }

    &:active,
    &.active {
      @include gl-text-blue-900;
      @include gl-focus($color: $blue-900);
      @include gl-bg-blue-100;

      &:focus {
        @include gl-focus($color: $blue-900);
      }
    }
  }

  &.btn-success {
    @include gl-bg-green-500;
    @include gl-inset-border-1-green-600;

    &:hover {
      @include gl-tmp-button-hover($green-800, $green-600);
    }

    &:focus {
      @include gl-focus($color: $green-800);
      @include gl-bg-green-600;
    }

    &:active,
    &.active {
      @include gl-focus($color: $green-900);
      @include gl-bg-green-700;

      &:focus {
        @include gl-focus($color: $green-900);
      }
    }
  }

  &.btn-success-secondary,
  &.btn-success-tertiary {
    @include gl-bg-transparent;
    @include gl-text-green-500;
    @include gl-font-weight-normal;
    @include gl-inset-border-1-green-500;

    &:hover {
      @include gl-text-green-700;
      @include gl-tmp-button-hover($green-700, $green-50);
    }

    &:focus {
      @include gl-text-green-700;
      @include gl-focus($color: $green-700);
      @include gl-bg-green-50;
    }

    &:active,
    &.active {
      @include gl-text-green-900;
      @include gl-focus($color: $green-900);
      @include gl-bg-green-100;

      &:focus {
        @include gl-focus($color: $green-900);
      }
    }
  }

  &.btn-danger {
    @include gl-bg-red-500;
    @include gl-inset-border-1-red-600;

    &:hover {
      @include gl-tmp-button-hover($red-800, $red-600);
    }

    &:focus {
      @include gl-focus($color: $red-800);
      @include gl-bg-red-600;
    }

    &:active,
    &.active {
      @include gl-focus($color: $red-900);
      @include gl-bg-red-700;

      &:focus {
        @include gl-focus($color: $red-900);
      }
    }
  }

  &.btn-danger-secondary,
  &.btn-danger-tertiary {
    @include gl-bg-transparent;
    @include gl-text-red-500;
    @include gl-font-weight-normal;
    @include gl-inset-border-1-red-500;

    &:hover {
      @include gl-text-red-700;
      @include gl-tmp-button-hover($red-700, $red-50);
    }

    &:focus {
      @include gl-text-red-700;
      @include gl-focus($color: $red-700);
      @include gl-bg-red-50;
    }

    &:active,
    &.active {
      @include gl-text-red-900;
      @include gl-focus($color: $red-900);
      @include gl-bg-red-100;

      &:focus {
        @include gl-focus($color: $red-900);
      }
    }
  }

  &.btn-default,
  &.btn-dashed,
  &.btn-confirm,
  &.btn-info,
  &.btn-success,
  &.btn-danger {
    &-secondary {
      @include gl-bg-white;
    }
  }

  &.btn-default,
  &.btn-dashed,
  &.btn-confirm,
  &.btn-info,
  &.btn-success,
  &.btn-danger {
    &-tertiary {
      @include gl-shadow-none;
      mix-blend-mode: multiply;

      &:hover {
        @include gl-shadow-none;
      }

      &:active,
      &:focus,
      &:focus:active {
        @include gl-focus;
      }
    }
  }

  &.btn-default-tertiary.selected {
    box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;
  }

  &.btn-sm {
    @include gl-py-2;
    @include gl-px-3;
    @include gl-line-height-normal;
    @include gl-font-base;

    gl-emoji {
      @include gl-font-sm;
    }
  }

  &.btn-dashed,
  &.btn-dashed-tertiary {
    @include gl-inset-border-1-gray-400;
    @include gl-bg-white;
    outline: 3px dotted $white;
    outline-offset: (-$gl-border-size-1);

    &:hover {
      @include gl-inset-border-1-gray-400;
      @include gl-bg-gray-50;
    }

    &:focus {
      @include gl-focus($color: $gray-400);
      outline: 3px dotted $gray-50;
      outline-offset: (-$gl-border-size-1);
    }

    &:active,
    &.active {
      @include gl-focus($color: $gray-600);
      outline: 3px dotted $gray-100;
      outline-offset: (-$gl-border-size-1);
      @include gl-bg-gray-100;

      &:focus {
        @include gl-focus($color: $gray-600);
        outline: 3px dotted $gray-100;
        outline-offset: (-$gl-border-size-1);
      }
    }
  }

  &.btn-icon {
    @include gl-p-3;
    @include gl-line-height-normal;

    .gl-button-icon {
      @include gl-mr-0;
    }

    &.btn-sm {
      @include gl-p-2;
    }
  }

  &.button-ellipsis-horizontal,
  &.button-ellipsis-horizontal.btn-sm {
    @include gl-py-0;
    @include gl-px-2;

    svg {
      @include gl-h-5;
      @include gl-w-5;
      @include gl-m-0;
    }
  }

  &.btn-label,
  &.btn-label:hover,
  &.btn-label:focus,
  &.btn-label:active {
    @include gl-bg-gray-10;
    @include gl-text-gray-900;
    @include gl-fill-current-color;
    @include gl-inset-border-1-gray-200;
    @include gl-cursor-default;
    user-select: text;
  }

  &.btn-link {
    @include gl-bg-transparent;
    @include gl-border-0;
    @include gl-font-base;
    @include gl-line-height-normal;
    @include gl-text-blue-500;
    @include gl-py-0;
    @include gl-px-0;
    @include gl-shadow-none;

    &:hover {
      @include gl-bg-transparent;
      @include gl-text-blue-500;
    }

    &:active {
      @include gl-text-blue-700;
      @include gl-text-decoration-underline;
    }

    &:active,
    &:focus,
    &:focus:active {
      @include gl-bg-transparent;
      @include gl-focus;
    }

    &.disabled,
    &[disabled] {
      @include gl-bg-transparent;
      @include gl-shadow-none;
    }
  }

  &.disabled,
  &.disabled:hover,
  &.disabled:focus,
  &.disabled:active,
  &.disabled.selected,
  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &[disabled]:active,
  &[disabled].selected {
    @include gl-bg-gray-10;
    @include gl-text-gray-500;
    @include gl-inset-border-1-gray-100;
    @include gl-opacity-10;
    cursor: not-allowed !important;

    .gl-button-icon {
      @include gl-fill-gray-400;
    }
  }

  &.disabled[class*='-tertiary'],
  &[disabled][class*='-tertiary'] {
    @include gl-bg-transparent;
    @include gl-shadow-none;
  }
}