.close {
  position: relative;
  opacity: .8;

  width: 34px;
  height: 34px;
  border-radius: $border-radius;
  border: 0!important;

  background-color: $gray-100;

  transition: $general-transition;

  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-times);

    font-size: 14px;
    color: $black;

    position: absolute;
    top: calc(50% - 7px);
    left: calc(50% - 5px);
  }

  &:hover {
    background-color: $gray-200;
  }

  &.btn-primary {
    opacity: 1;
    &:before { color: $btn-primary-text; }
  }

  @include hover-focus {
    opacity: 1;
  }

  // Opinionated: add "hand" cursor to non-disabled .close elements
  &:not(:disabled):not(.disabled) {
    cursor: pointer;
  }
}