@import '/UI/Style.scss';

.context-menu {
  position: absolute;
  z-index: 999;

  pointer-events: all;

  // Start hidden
  opacity: 1;

  min-width: 170px;
  flex-direction: column;

  background-color: $gray;
  border: 3px solid $gray-darkerer;
  padding: 5px;
  gap: 5px;

  transition: opacity 0.08s ease;

  &:intro {
    opacity: 0;
  }

  &:outro {
    opacity: 0;
  }

  .item {
    padding-left: 4px;

    background-color: $gray-darkerer;
    color: $white;

    height: 20px;

    font-family: $font-main;
    font-size: 14px;

    flex-grow: 1;
    align-items: center;

    &.button {
      padding-left: 8px;

      height: 40px;

      color: $white;

      font-family: $font-main;
      font-size: 20px;

      text-overflow: ellipsis;

      &:hover {
        background-color: $gray-brighter;
      }

      &:active {
        background-color: $light-gray;
        font-size: 19px;
      }
    }
  }
}