/* -------------------------------------------------------------------------- */
/*                                    Hover                                   */
/* -------------------------------------------------------------------------- */

.hover-actions {
  display: none;
  position: absolute;
  &.show {
    display: inline-block;

    & + .hover-hide {
      // opacity: 0;

      opacity: 1;
      transition: opacity 0.3s ease;
    }
  }
}

a[href] {
  &.bg-body-secondary {
    @include hover-focus {
      background-color: var(--#{$prefix}tertiary-bg) !important;
    }
  }
}

// Used in search box
.text-primary-hover {
  @include hover-focus {
    color: var(--#{$prefix}primary) !important;
  }
}

.hover-danger {
  @include hover-focus {
    color: var(--#{$prefix}danger) !important;
  }
}

.hover-shadow {
  @include hover-focus {
    box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
  }
}

.hover-actions-trigger {
  position: relative;

  // Style for email Inbox
  .inbox-link {
    color: inherit;
    text-decoration: none;
  }

  @include hover-focus {
    .hover-actions {
      z-index: 1;
      display: flex;
      &.btn {
        display: inline-block;
      }
      animation: fade 0.15s ease-in-out;
    }

    .hover-hide {
      opacity: 0;
    }
    @each $breakpoint, $value in $grid-breakpoints {
      .hover-#{$breakpoint}-hide {
        @include media-breakpoint-up($breakpoint) {
          opacity: 0;
        }
      }
      .hover-#{$breakpoint}-show {
        @include media-breakpoint-up($breakpoint) {
          opacity: 1;
        }
      }
    }
  }
}

.bg {
  @each $color, $value in $hover-bg-colors {
    &-#{$color}-hover {
      &:hover {
        background-color: #{$value} !important;
      }
    }
  }
}

.text {
  @each $color, $value in $hover-text-colors {
    &-#{$color}-hover {
      &:hover {
        color: #{$value} !important;
      }
    }
  }
}

.d-toggle-container {
  .d-none-hover {
    display: block !important;
  }
  .d-block-hover {
    display: none !important;
  }
  @include hover-focus {
    .d-none-hover {
      display: none !important;
    }
    .d-block-hover {
      display: block !important;
    }
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}