cyb/src/components/appMenu/CircularMenu/CircularMenuItem.module.scss

@use '../../../style/mixins.scss' as *;

.menuItem {
  box-shadow: 0px 0px 13px #ffffff54;
  opacity: 1;
  background-color: #101010;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  justify-content: center;
  align-items: center;
  display: flex;
  pointer-events: auto;
  transition: 0.2s ease-in-out 0s;
}

.menuItem.disabled {
  opacity: 0.3;
  filter: grayscale(100%);
  pointer-events: none;
  box-shadow: none;

  &:hover {
    border: none;
    box-shadow: none;
    transform: none;
  }
}

.menuItem.active {
  border: 1px solid #4ed6ae;
  box-shadow: 0px 0px 8px #4ed6ae inset, 0px 0px 13px #4ed6ae;
  width: 100%;
  height: 100%;
}

.menuItem:hover {
  border: 1px solid #4ed6ae;
  box-shadow: 0px 0px 8px #4ed6ae inset, 0px 0px 13px #4ed6ae;
  transform: scale(1.2);
}

.itemContainer {
  position: inherit;
  display: flex;
}

.icon {
  width: 30px;
  height: 30px;
  object-fit: cover;
  display: block;
  margin: auto;
}

.portalGlow {
  filter: drop-shadow(0 0 4px #f62bfd) drop-shadow(0 0 8px #f62bfda0);
}

.navLink {
  display: block;
  padding: 10px;
  position: inherit;
  margin: -10px;
}

.external {
  display: block;
  position: absolute;
  bottom: 5px;
  transform: translate(50%, 50%);
  width: 20px;
  height: 20px;

  @include withShareIcon;
}