
.flag {
  position: relative;
}

.flag a,
.flag button {
  @extend %button-small;
  display: inline-block;
  white-space: pre;

  &:focus, &:hover {
    border-width: 1px;
    border-style: solid;
  }
}

.flag a:before,
.flag button:before {
  color: inherit;
  display: block;
  margin-right: .75rem;
}


.flag.action-unflag a {
  @extend %button-active;

  &:focus::before,
  &:hover::before {
    //@include icon(xmark);
  }
}

.flag a.disabled {
  opacity: .5;
}

.js-flag-message {
  @include icon(info-circle) {
    color: inherit;
    padding-right: .75rem;
  }
  background: $color-bg-success;
  border: 1px solid $color-success;
  color: $color-text;
  font-size: var(--font-size-s);
  display: block;
  margin: 0;
  padding: .5rem 1rem;
  position: absolute;
  left: 3rem;
  text-align: right;
  top: -.5rem;
  white-space: nowrap;
  z-index: +1;
}

.js-flag-message {
  //transform:translateX(calc(-100% - #{$grid-gutter}));
}

.action-flag {
  // warn user upon removing a bookmark.
  .js-flag-message {
    border-color: $color-warning;
    background-color: $color-bg-warning;
    @include icon(warning);
  }
}

.flag .ajax-spinner {
  @include icon(info-circle);
  background-color: $color-bg-info;
  border-color: $color-bg-info;
  color: $color-info;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: $button-border-radius;
  width: 8rem;
  overflow: visible;
  transition: opacity 3s linear;
  font-size: var(--font-size-s);

   &:before {
    margin-right: .75rem;
    color: inherit;
  }
}

// specific flag icons

.flag-bookmark-node,
.flag-bookmark-term {
  .flag--link {
    @include icon(bookmark);
  }
}

.flag-recommendation-node {
  .flag--link {
    @include icon(star);
  }
}

.flag-report-abuse {
  .flag--link {
    //@extend %button-danger;
    @include icon(hand);
  }
}

.flag-claim-ownership {
  .flag--link {
    @include icon(people-arrows-left-right);
  }
}

.flag-bookmark-node,
.flag-bookmark-term,
.flag-recommendation-node {
}

// Bookmark flag icon in header image region

.region-header-intro {
  #block-bookmarkflagicon {
    position: absolute;
    top: auto;
    left: auto;
    bottom: -3.5rem;
    right: 1rem;
    z-index: +1;
    @include breakpoint(m) {
      right: 3.25rem;
    }
    @include breakpoint(l) {
      right: 4.25rem;
      bottom: -4.5rem;
    }
  }

  .js-flag-message,
  .flag .ajax-spinner {
    transform:translateX(calc(-100% - 2rem));
  }

  div[class^="flag flag-bookmark"] a {
    overflow: hidden;
    width: 2rem;
    height: 2rem;
    padding: .333rem .625rem;
    border-radius: 50%;
    margin-bottom: 0;
    @include breakpoint(m) {
      width: 3rem;
      height: 3rem;
      padding: .666rem .825rem;
      border-width: 2px !important;
      &:before {
        font-size: 1.5rem;
        padding-right: 3rem;
      }
    }
  }
}

#block-heroimagefromcurrententityfromfield-mood-image + #block-bookmarkflagicon {
  right: 1rem;
  @include breakpoint(m) {
    bottom: .5rem;
    right: 1.25rem;
  }

  .action-unflag a {
    border-color: var(--color-text-inverted);
  }
}

// compact flag styling in bookmarks view
// see views/views.scss

.bookmarks .flag {
  a {
    overflow: hidden;
    width: 2em;
    height: 2em;
    position: relative;
    margin-bottom: 0;
  }

  .flag--link {
    color: var(--color-interaction);
    background-color: transparent;
    padding: 0 0 0 3em;
    border: 0 none;

    &:before {
      position: absolute;
      left: 0;
      border: 1px solid var(--color-interaction);
      padding: .5em;
      width: 2em;
      height: 2em;
      text-align: center;
      border-radius: 50%;
      line-height: 1;
    }

    &:focus,
    &:hover {
      background-color: transparent;
    }

    &:focus::before,
    &:hover::before {
      border-radius: 50%;
      background-color: var(--color-interaction);
      color: var(--color-text-inverted);
    }
  }
  &.action-unflag {
    .flag--link {
      //@include icon(trash-can, fas);
      @include icon(xmark, fas);

      &:focus::before,
      &:hover::before {
        background-color: var(--color-danger);
        border-color: var(--color-danger);
      }
    }
  }
}

