$shortcutMenuWidth: 65px;
$transitionDuration: 50ms;

.shortcutMenu {
  align-items: center;
  display: flex;
  flex: 0 0 var(--shortcut-menu-width, #{$shortcutMenuWidth});
  column-gap: 4px;
  justify-content: space-between;
  width: var(--shortcut-menu-width, #{$shortcutMenuWidth});

  visibility: var(--shortcut-menu-visibility);
  opacity: var(--shortcut-menu-multiplier);
  transition-duration: $transitionDuration;
  transition-timing-function: ease-out;
  // Yes, `visibility` works ok.
  transition-property: visibility, opacity;

  &.incoming {
    flex-direction: row;
    margin-inline-start: 10px;
  }

  &.outgoing {
    flex-direction: row-reverse;
    margin-inline-end: 10px;
  }
}

.shortcutMenuButton {
  opacity: 0.6;
  background-color: var(--chatViewBg);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  margin: 0;
  padding: 5px;

  // Commented out because apparently messages that are below the message
  // that is performing this transition seem to get moved to another
  // "layer" (see https://dev.opera.com/articles/css-will-change-property#does-will-change-affect-the-element-it-is-applied-to-beyond-hinting-the-browser-about-the-changes-to-that-element)
  // which turns off subpixel antialiasing making "wobble" as you move
  // the cursor above the messages.
  //
  // For reference, we already had to deal with antialiasing shenanigans, see
  // `willChange` of `id='message-list'`, this commit:
  // https://github.com/deltachat/deltachat-desktop/commit/24a5107d440d9f2041d34f60f4bde16a0dba6be8
  //
  // transform: scale(calc(0.75 + 0.25 * var(--shortcut-menu-multiplier)));
  // transition: transform ease-out $transitionDuration;
}

.shortcutMenuIcon {
  background-color: var(--contextMenuText);
  display: block;
  height: 20px;
  width: 20px;
}

.originalMessageButton {
  background-color: var(--showInChatButtonBg);
  border-radius: 100%;
  height: 40px;
  width: 40px;
  border: none;
  position: relative;
  padding: 0;
  cursor: pointer;
}

.originalMessageIcon {
  mask-image: url(./images/icons/chevron-right.svg);
  -webkit-mask: url(./images/icons/chevron-right.svg) no-repeat center;
  mask-size: 100%;
  -webkit-mask-size: 100%;
  width: 40px;
  height: 40px;
  background-color: var(--buttonPrimaryText);
  margin-inline-start: 2px;
}
