.menus--more-options-container {
  position: relative;
  width: fit-content;
  height: fit-content;
}

.menus--more-options-button {
  background-color: white;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  outline: solid 1px var(--border-secondary);
  padding: 0;

  svg {
    pointer-events: none;
  }
}

td > .menus--more-options-container > .menus--more-options-button,
.menus--more-options-button[data-type="in_table"] {
  background-color: transparent;
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  outline: none;
  box-shadow: none;
  border: none;
}

.menus--more-options-menu {
  position: absolute;
  top: calc(100% + .25rem);
  right: 0;
  width: fit-content;
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px -2px var(--neutral-100);
  z-index: 1000;
  display: flex;
  padding-block: 0.25rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 150px;
  outline: solid 1px var(--neutral-100);

  li {
    list-style: none;
    width: 100%;
    text-wrap: nowrap;
    padding-inline: .25rem;
    padding-block: .125rem;

    a,
    button {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: .5rem;
      text-decoration: none;
      color: var(--neutral-800);
      font-size: var(--rem-14);
      font-variation-settings: 'wght' var(--text-medium);
      background-color: transparent;
      border-radius: var(--table-radius);
      padding: .5rem .75rem;

      &:hover {
        opacity: 80%;
        background-color: var(--neutral-50);
      }
    }
  }
}