@use 'config/colors';
@use 'functions/color';
@use 'mixins/position';
@use 'mixins/transition';

.container {
  position: relative;
  width: 40px; // should equal the width of Picon
  height: 40px; // should equal the height of Picon
  user-select: none;
}

.shadow {
  &::before {
    content: '';
    // @include position.absolute-anchor($x: -3px, $y: -6px);
    // @include position.absolute-anchor($x: -1px, $y: -4px);
    @include position.absolute-fill;
    // width: 41px;
    // height: 41px;
    // background-color: color.alpha(colors.$white, 0.3);
    background-color: colors.$transparent;
    // border: 3px solid colors.$transparent;
    border-radius: 45px;
    // mask: radial-gradient(circle, transparent 5%, red);
    // transform: scale(0);
    // opacity: 0;
    // @include transition.apply(background-color, border-color, opacity);
    @include transition.apply(background-color);
    // z-index: -1;
    pointer-events: none;
  }

  &:hover {
    &.light::before {
      background-color: color.alpha(colors.$black, 0.05);
    }

    &.dark::before {
      background-color: color.alpha(colors.$white, 0.075);
    }
  }
}

.picon {
  z-index: 1;
}
