@use "sass:map";
@use "../util/scss/besm.scss" as *;
@use "../util/scss/include.scss" as *;

@mixin cx-cxcredit($name: "cxcredit", $besm: $cx-besm) {
   $block: map.get($besm, block);
   $element: map.get($besm, element);
   $state: map.get($besm, state);
   $mod: map.get($besm, mod);

   .#{$block}#{$name} {
      width: 50px;
      height: 50px;
      opacity: 0.5;
      transition: opacity 0.3s ease-in-out;
      background: rgba(255, 255, 255, 0.1);
      cursor: pointer;
      position: fixed;
      bottom: 20px;
      right: 20px;

      &:hover {
         opacity: 1;
      }

      &.#{$mod}inline {
         position: relative;
         bottom: auto;
         right: auto;
      }
   }

   .#{$element}#{$name}-icon {
      width: 100%;
      height: 100%;
   }
}

@if (cx-should-include("cx/widgets/CxCredit")) {
   @include cx-cxcredit();
}