@charset "UTF-8";

/* © DialogueTrainer */

@use 'base' as *;

.sideMenu, .sideMenuOpenIcon {
  position: absolute;
  top: 5%;
  left: 100%;
  z-index: 100;

  svg {
    fill: white;
  }

  .subjectDiv > & {
    margin-left: 2px;
  }
}

.sideMenu {
  .tippy-box {
    font-size: revert;
    color: revert;
    background-color: revert;
  }

  .tippy-content {
    padding: 0;
  }

  .sideMenuDropdown {
    flex-direction: column;
    overflow: hidden;
    list-style-type: none;
    background-color: $slate-800;
    border-radius: $rounded-base;
    transition: background-color .3s ease-in-out;

    .sideMenuItem button {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      padding: $spacing-2;
      font-size: 11px;
      color: white;
      white-space: nowrap;
      background-color: $slate-800;
      border: none;
      transition: background-color .3s ease-in-out;
      gap: $spacing-2;

      &:enabled:hover {
        background-color: $slate-700;
      }

      &.clicked::after {
        content: '';
        position: relative;
        left: -$spacing-1;
        width: 16px;
        height: 16px;
        background-color: #14B8A6;
        clip-path: polygon(28% 38%, 41% 53%, 75% 24%, 86% 38%, 40% 78%, 15% 50%);
      }

      .iconDiv {
        padding: 2px;
        font-size: 0;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: $rounded-base;

        svg {
          width: 14px;
          height: 14px;
        }
      }
    }
  }
}

.sideMenuOpenIcon {
  margin-left: 3px;
  font-size: 0;
  background-color: $slate-800;
  border-radius: 0 $rounded-base $rounded-base 0;
  opacity: 0;
  transition: background-color .3s ease-in-out;

  &:hover {
    background-color: $slate-700;
  }

  .nodeContent:hover &, .subjectDiv:hover > & {
    opacity: 1;
  }
}
