:host {
  margin: 0 5px;

  .buttons-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 5px;
  }
  .button-wrapper {
    position: relative;
  }

  .children-wrapper {
    display: flex;
    flex-direction: column;
    position: absolute;
    transform: translateY(calc(-100% - 50px));
    z-index: 999;
    //.child-button {
    //  opacity: 0;
    //  visibility: hidden;
    //  transition: visibility 0s linear 200ms, opacity 200ms;
    //  pointer-events: none;
    //  &.show {
    //    opacity: 1;
    //    visibility: visible;
    //    transition: visibility 0s linear 0s, opacity 200ms;
    //    pointer-events: all;
    //  }
    //}
  }

  button {
    z-index: 1;
    img {
      pointer-events: none;
      width: 100%;
      height: 100%;
    }
    &.active {
      box-shadow: none;
    }
    &.circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;

      img {
        border-radius: 50%;
      }
    }
  }
}
