.gui-option-menu-item {
  @apply text-neutral-20 text-base p-2 w-full flex items-center;

  text-align: left;
  background: transparent;
  border:none;

  &:hover {
    @apply bg-neutral-95;

    .gui-option-menu-item-content {
      @include gradient-overflow(theme('colors.neutral.95'));
    }
  }

  &-active, &:active {
    @apply bg-blue-95;

    .gui-option-menu-item-content {
      @include gradient-overflow(theme('colors.blue.95'));
    }
  }
}

.gui-option-menu-item-content {
  @include gradient-overflow(white);
  @apply pr-5;

  flex-shrink: 1;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.gui-option-menu-item-active {
  @apply text-blue-primary;
}

.gui-option-menu-item-danger {
  @apply text-red-primary;

  &:hover {
    @apply bg-red-95;
  }
}

.gui-option-menu-item-meta {
  @apply text-sm text-neutral-primary pl-4;
}

.gui-option-menu-item-meta,
.gui-option-menu-item-tick {
  @apply ml-auto;

  flex-shrink: 0;
}

.gui-option-menu-item-tick svg {
  width: 9px;
}

.gui-option-menu-item-has-meta {
  .gui-option-menu-item-tick {
    @apply ml-0;
  }
}