cyb/src/components/buttons/ButtonIcon/ButtonIcon.module.scss

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  background: transparent;
  position: relative;
  margin: 0 10px;
  padding: 5px 0px;

  img {
    width: 34px;
    height: 30px;
    object-fit: contain;
  }

  &.activeIcon {
    &::after {
      content: '';
      height: 1px;
      width: 20px;
      position: absolute;
      top: 100%;
      background-color: #36d6ae;
      box-shadow: 0px 0px 3px 1px #36d6ae;
    }
  }

  &:hover {
    img {
      opacity: 0.8;
    }
  }

  &:disabled {
    opacity: 0.6;
  }

  @media (max-width: 540px) {
    margin: 0 5px;

    img {
      width: 24px;
      height: 22px;
    }
  }
}