.btn.btn-like {
  @include button-outline-variant(rgba($secondary, 50%), lighten($red, 15%), rgba(lighten($red, 10%), 0.15), rgba(lighten($red, 10%), 0.5));
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: lighten($red, 15%);
  }
  &:not(:disabled):not(.disabled):not(:hover) {
    background-color: transparent;
  }
}

.btn.btn-bookmark {
  @include button-outline-variant(rgba($secondary, 50%), $orange, rgba(lighten($orange, 20%), 0.5), rgba(lighten($orange, 20%), 0.5));
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: $orange;
  }
  &:not(:disabled):not(.disabled):not(:hover) {
    background-color: transparent;
  }
}

.btn.btn-subscribe {
  @include button-outline-variant(rgba($secondary, 50%), $success, rgba(lighten($success, 10%), 0.15), rgba(lighten($success, 10%), 0.5));
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: lighten($success, 15%);
  }
  &:not(:disabled):not(.disabled):not(:hover) {
    background-color: transparent;
  }
  width: 44px;
}

.btn.btn-seen-user {
  $color-seen-user: #549c79;

  @include button-outline-variant($color-seen-user, $color-seen-user, rgba(lighten($color-seen-user, 10%), 0.15), rgba(lighten($color-seen-user, 10%), 0.5));
  @include button-outline-svg-icon-variant($color-seen-user, $color-seen-user);
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: $color-seen-user;
    svg {
      fill: $color-seen-user;
    }
  }
  &:not(:disabled):not(.disabled):not(:hover) {
    background-color: transparent;
  }
}

.btn-copy,
.btn-edit {
  &:not(:hover):not(:active) {
    background-color: transparent !important;
  }
  opacity: 0.5;
}

.btn-edit-tags {
  opacity: 0.5;

  &.no-tags {
    opacity: 0.7;
  }
}

.rounded-pill-weak {
  border-radius: 60px;
}

// fill button style
:root .btn.btn-fill {
  position: relative;
  display: flex;
  justify-content: space-between;
  min-width: 130px;
  padding: 0px;
  overflow: hidden;
  color: white;
  text-align: center;
  background-color: rgba(lighten(black, 15%), 0.5);
  border: none;

  &:not(:disabled) {
    cursor: pointer;
  }

  .btn-label {
    position: relative;
    z-index: 1;
    padding: 9px 15px;
    color: white;
    text-decoration: none;
  }

  .btn-label-text {
    position: relative;
    z-index: 1;
    margin: auto;
    color: white;
    text-align: center;
    text-decoration: none;
  }

  // effect
  .eff {
    position: absolute;
    top: -50px;
    left: 0px;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease;
  }

  &:hover {
    .eff {
      top: 0;
    }
  }
}

// define disabled button w/o pointer-events, see _override-bootstrap.scss
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  &.grw-pointer-events-none {
    pointer-events: none;
  }
}
