.str-chat__actions-box {
  background: #fff;
  background-image: linear-gradient(
    -180deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(0, 0, 0, 0.02) 100%
  );
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.22), 0 1px 0 0 rgba(0, 0, 0, 0.08),
    0 1px 8px 0 rgba(0, 0, 0, 0.05);
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  position: absolute;
  min-width: 150px;

  &--right {
    right: 0;
    top: calc(100% + 2px);
  }

  &--left {
    left: 0;
    top: calc(100% + 2px);
  }

  > button {
    text-align: left;
    width: 100%;
    border: none;
    margin: 0;
    padding: 10px;
    font-size: 12px;
    background: none;
    cursor: pointer;

    &:not(:last-of-type) {
      box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08);
    }

    &:hover {
      color: #006cff;
    }
  }
}

.dark.str-chat {
  .str-chat__message-actions-box {
    background: #67686a;
    background-image: linear-gradient(
      -180deg,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(0, 0, 0, 0.02) 100%
    );
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.22), 0 1px 0 0 rgba(0, 0, 0, 0.08),
      0 1px 8px 0 rgba(0, 0, 0, 0.05);
    button {
      color: white;
      &:hover {
        color: $secondary-color;
      }
    }
  }
}