.generate_button {
  cursor: pointer;
  border: none;
  background: transparent none;
  padding: 0;
  color: var(--theme-elevation-800);
  transition: opacity 0.3s ease;
  opacity: 1;

  > .icon {
    width: 20px;
  }

  > .text {
    flex-grow: 2;
  }

  &:active {
    opacity: 0.5;
  }

  [data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.menu {
  display: flex;
  gap: 1px;
  flex-direction: column;

  > span {
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    gap: 8px;
    width: var(--popup-width);

    &.active {
      background: var(--theme-elevation-100);
    }

    &:hover {
      background: var(--theme-elevation-100);
    }
  }
}

.subMenu {
  position: absolute;
  left: calc(var(--popup-width) + 12px);
  width: calc(var(--popup-width) + 12px);
  top: 10px;
  height: calc(100% - 16px);

  overflow: auto;
}

.hoverMenu {
  overflow: hidden;
  min-width: 0;
  opacity: 0;
  transition: opacity 250ms ease-in;

  .subMenu {
    display: none;
  }

  &[data-show=true]{
    min-width: calc(var(--popup-width) * 2 + 12px);
    opacity: 1;

    .subMenu {
      display: block;
    }
  }
}

.menuInput {
  box-shadow: 0 2px 3px #0002040d, 0 10px 4px -8px #00020405;
  font-family: var(--font-body);
  border: 1px solid var(--theme-elevation-150);
  background: var(--theme-input-bg);
  color: var(--theme-elevation-800);
  border-radius: 0;
  -webkit-appearance: none;

  font-size: inherit !important;
  height: auto !important;
  line-height: 1.9rem;

  width: 100%;
  padding: 4px 8px !important;

  outline: none;
  &:focus-visible{
    outline: none;
  }
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  display: inline-block;
  width: calc(var(--popup-width) + 12px);
}